@hashicorp/react-components 0.0.0 → 1.0.1

package/src/components/marketo-form/utils.ts

@@ -0,0 +1,445 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { isAnalyticsMethodAvailable } from '@hashicorp/platform-analytics'
+import type {
+	MarketoFormField,
+	MarketoFormMetadataResponse,
+	MarketoSubmissionResponse,
+	OnSubmitProps,
+	OnSubmitData,
+} from './types'
+import { useFormState } from 'react-hook-form'
+import cookies from 'js-cookie'
+
+// Marketo stores field names in two versions, SOAP and REST. Some API
+// endpoints return SOAP names, while others accept REST names. This object
+// contains all fields from our Marketo instance that have a REST name that is
+// different from the SOAP name.
+const soapToRESTFieldNames: Record<string, string> = {
+	Address: 'address',
+	AnnualRevenue: 'annualRevenue',
+	AnonymousIP: 'anonymousIP',
+	BillingCity: 'billingCity',
+	BillingCountry: 'billingCountry',
+	BillingPostalCode: 'billingPostalCode',
+	BillingState: 'billingState',
+	BillingStreet: 'billingStreet',
+	City: 'city',
+	Company: 'company',
+	Country: 'country',
+	DoNotCall: 'doNotCall',
+	DoNotCallReason: 'doNotCallReason',
+	Email: 'email',
+	EmailInvalid: 'emailInvalid',
+	EmailInvalidCause: 'emailInvalidCause',
+	Fax: 'fax',
+	FirstName: 'firstName',
+	Industry: 'industry',
+	InferredCompany: 'inferredCompany',
+	InferredCountry: 'inferredCountry',
+	LastName: 'lastName',
+	LeadRole: 'leadRole',
+	LeadScore: 'leadScore',
+	LeadSource: 'leadSource',
+	LeadStatus: 'leadStatus',
+	MainPhone: 'mainPhone',
+	MarketoSocialFacebookDisplayName: 'facebookDisplayName',
+	MarketoSocialFacebookId: 'facebookId',
+	MarketoSocialFacebookPhotoURL: 'facebookPhotoURL',
+	MarketoSocialFacebookProfileURL: 'facebookProfileURL',
+	MarketoSocialFacebookReach: 'facebookReach',
+	MarketoSocialFacebookReferredEnrollments: 'facebookReferredEnrollments',
+	MarketoSocialFacebookReferredVisits: 'facebookReferredVisits',
+	MarketoSocialGender: 'gender',
+	MarketoSocialLastReferredEnrollment: 'lastReferredEnrollment',
+	MarketoSocialLastReferredVisit: 'lastReferredVisit',
+	MarketoSocialLinkedInDisplayName: 'linkedInDisplayName',
+	MarketoSocialLinkedInId: 'linkedInId',
+	MarketoSocialLinkedInPhotoURL: 'linkedInPhotoURL',
+	MarketoSocialLinkedInProfileURL: 'linkedInProfileURL',
+	MarketoSocialLinkedInReach: 'linkedInReach',
+	MarketoSocialLinkedInReferredEnrollments: 'linkedInReferredEnrollments',
+	MarketoSocialLinkedInReferredVisits: 'linkedInReferredVisits',
+	MarketoSocialSyndicationId: 'syndicationId',
+	MarketoSocialTotalReferredEnrollments: 'totalReferredEnrollments',
+	MarketoSocialTotalReferredVisits: 'totalReferredVisits',
+	MarketoSocialTwitterDisplayName: 'twitterDisplayName',
+	MarketoSocialTwitterId: 'twitterId',
+	MarketoSocialTwitterPhotoURL: 'twitterPhotoURL',
+	MarketoSocialTwitterProfileURL: 'twitterProfileURL',
+	MarketoSocialTwitterReach: 'twitterReach',
+	MarketoSocialTwitterReferredEnrollments: 'twitterReferredEnrollments',
+	MarketoSocialTwitterReferredVisits: 'twitterReferredVisits',
+	MiddleName: 'middleName',
+	MktoPersonNotes: 'mktoPersonNotes',
+	MobilePhone: 'mobilePhone',
+	NumberOfEmployees: 'numberOfEmployees',
+	Phone: 'phone',
+	PostalCode: 'postalCode',
+	Rating: 'rating',
+	Salutation: 'salutation',
+	SICCode: 'sicCode',
+	State: 'state',
+	Title: 'title',
+	Unsubscribed: 'unsubscribed',
+	UnsubscribedReason: 'unsubscribedReason',
+	Website: 'website',
+}
+
+// Given an object with SOAP named keys, returns an object with SOAP
+// names replaced with their REST variants.
+export function convertToRESTFields(
+	data: Record<string, unknown>
+): Record<string, unknown> {
+	const restData: Record<string, unknown> = {}
+	for (const [key, value] of Object.entries(data)) {
+		if (key in soapToRESTFieldNames) {
+			restData[soapToRESTFieldNames[key]] = value
+		} else {
+			restData[key] = value
+		}
+	}
+	return restData
+}
+
+// Returns the label for a field.
+export function formattedLabel(field: MarketoFormField): string {
+	if ('label' in field && field.label) {
+		return field.label
+	}
+
+	return field.id
+}
+
+// Returns a Record<string, MarketoFormField[]> that groups fields that should
+// be rendered by a single component.
+//
+// This function allows consumers to define multiple fields that should be
+// rendered by a single component. The configuration is in the following form:
+// const config = {
+//   groupName: {
+//     fields: ["FieldNameOne", "FieldNameTwo"],
+//     component: RenderComponent
+//   }
+// }
+// In this instance, MarketoForm will call RenderComponent with a `fields` prop
+// containing the MarketoFormField object for FieldNameOne and FieldNameTwo.
+export function groupFields(
+	fields: MarketoFormField[],
+	groups: Record<
+		string,
+		{
+			fields: string[]
+			component: (props: { fields: MarketoFormField[] }) => JSX.Element
+		}
+	>
+): Record<string, MarketoFormField[]> {
+	// Final value that will be returned. Keys are group names and values are
+	// an array of MarketoFormField objects.
+	const grouped: Record<string, MarketoFormField[]> = {}
+
+	fields.forEach((field) => {
+		// Check if groups contains a group targeting this field
+		const customGroup = Object.entries(groups).filter(([_, config]) => {
+			return config.fields.includes(field.id)
+		})
+		if (customGroup.length > 0) {
+			const customGroupName = customGroup[0][0]
+			if (customGroupName in grouped) {
+				grouped[customGroupName].push(field)
+			} else {
+				grouped[customGroupName] = [field]
+			}
+		} else {
+			grouped[field.id] = [field]
+		}
+	})
+
+	return grouped
+}
+
+// @TODO: export this from the @hashicorp/platform-analytics/utm-params-capture & import in this file
+const UTM_ALLOW_LIST = [
+	'utm_source',
+	'utm_medium',
+	'utm_offer',
+	'utm_campaign',
+	'utm_content',
+	'utm_channel_bucket',
+]
+
+export function getUtmCookies() {
+	const allCookies = cookies.get()
+
+	if (!allCookies) {
+		return {}
+	}
+
+	const utmCookies: Record<string, string> = {}
+
+	for (const [key, value] of Object.entries(allCookies)) {
+		if (UTM_ALLOW_LIST.includes(key)) {
+			utmCookies[`${key}__c`] = value
+		}
+	}
+
+	return utmCookies
+}
+
+export const STORED_FIELD_NAMES = ['FirstName', 'LastName', 'Email']
+
+// Returns an object representing the default state of the form as defined by
+// the Marketo form's configuration.
+export function calculateDefaultValues(
+	fields: MarketoFormField[],
+	values?: Record<string, any>
+): Record<string, string | boolean> {
+	const initialValues: Record<string, string | boolean> = {}
+	const utmCookies = getUtmCookies()
+	fields.forEach((field) => {
+		if (
+			'defaultValue' in field &&
+			field.defaultValue &&
+			field.defaultValue !== ''
+		) {
+			if (field.dataType === 'select') {
+				// For some reason, the Marketo API returns the value for <select> fields
+				// as a JSON encoded string.
+				initialValues[field.id] = JSON.parse(field.defaultValue)[0]
+			} else {
+				initialValues[field.id] = field.defaultValue
+			}
+		} else if (field.dataType === 'checkbox') {
+			initialValues[field.id] = field.fieldMetaData.initiallyChecked
+		} else if (utmCookies[field.id]) {
+			initialValues[field.id] = utmCookies[field.id]
+		} else if (field.dataType !== 'htmltext') {
+			// htmltext is a presentational element, and shouldn't have a value
+			initialValues[field.id] = ''
+		}
+	})
+	return { ...initialValues, ...values }
+}
+
+export function useErrorMessage(id: string): string | undefined {
+	const { errors, touchedFields } = useFormState()
+
+	if (!touchedFields[id] || !errors[id]) {
+		return
+	}
+
+	return errors[id]?.message as string
+}
+
+export function segmentIdentify(leadFormFields: Record<string, unknown>) {
+	// This function is wrapped in a try/catch to prevent Segment errors from
+	// interrupting the form submission workflow.
+	try {
+		if (isAnalyticsMethodAvailable('identify')) {
+			const traits: Record<string, unknown> = {}
+
+			// Segment traits mostly map 1:1 to Marketo REST field names. However,
+			// since that's not always the case, we check and set each
+			// field individually.
+			// Reference: https://segment.com/docs/connections/spec/identify/
+			if ('email' in leadFormFields) {
+				traits['email'] = leadFormFields['email']
+			}
+
+			if ('firstName' in leadFormFields) {
+				traits['firstName'] = leadFormFields['firstName']
+			}
+
+			if ('lastName' in leadFormFields) {
+				traits['lastName'] = leadFormFields['lastName']
+			}
+
+			if ('phone' in leadFormFields) {
+				traits['phone'] = leadFormFields['phone']
+			}
+
+			if ('title' in leadFormFields) {
+				traits['title'] = leadFormFields['title']
+			}
+
+			if ('company' in leadFormFields) {
+				traits['company'] = { name: leadFormFields['company'] }
+			}
+
+			if ('country' in leadFormFields) {
+				traits['address'] = { country: leadFormFields['country'] }
+			}
+
+			if (Object.keys(traits).length > 0) {
+				window.analytics.identify(traits)
+			}
+		}
+	} catch (err) {
+		console.error(err)
+	}
+}
+
+// Returns true if any of the results have a status of skipped
+export function includesSkippedRecords(
+	res: MarketoSubmissionResponse
+): boolean {
+	return res.result.some((r) => r.status === 'skipped')
+}
+
+export function isValidEmail(value: string): boolean {
+	// Source: https://html.spec.whatwg.org/multipage/input.html#email-state-(type=email)
+	// Slightly modified to require domains instead of bare TLDs
+	/* eslint-disable-next-line no-useless-escape */
+	return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/i.test(
+		value
+	)
+}
+
+interface HandleSubmitFormProps extends OnSubmitProps {
+	metadata: MarketoFormMetadataResponse
+	data: OnSubmitData
+	reset: () => void
+}
+
+export const handleSubmitForm = async ({
+	data,
+	transformData,
+	onSubmitError,
+	onSubmitStart,
+	onSubmitSuccess,
+	resetOnSubmission,
+	metadata,
+	reset,
+}: HandleSubmitFormProps) => {
+	const leadFormData = transformData ? transformData(data) : data
+
+	if (onSubmitStart) {
+		onSubmitStart()
+	}
+
+	const leadFormFields = convertToRESTFields(leadFormData)
+
+	segmentIdentify(leadFormFields)
+
+	const res = await fetch(`${window.location.origin}/api/marketo/submit`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			input: [
+				{
+					leadFormFields,
+					visitorData: {
+						pageURL: window.location.href,
+					},
+				},
+			],
+			formId: metadata.result[0].id,
+		}),
+	})
+	const marketoResponse = (await res.json()) as MarketoSubmissionResponse
+	if (
+		res.status === 200 &&
+		marketoResponse.success &&
+		!includesSkippedRecords(marketoResponse)
+	) {
+		if (onSubmitSuccess) {
+			onSubmitSuccess(leadFormData)
+		}
+
+		// Remove fields that shouldn't be stored in local storage
+		const dataToPersist = Object.fromEntries(
+			Object.entries(data).filter(([k]) => STORED_FIELD_NAMES.includes(k))
+		)
+		localStorage.setItem('marketoFormData', JSON.stringify(dataToPersist))
+
+		if (resetOnSubmission) {
+			reset()
+		}
+	} else {
+		console.error(marketoResponse)
+		if (onSubmitError) {
+			onSubmitError()
+		}
+
+		throw new Error('An error occurred while submitting form.')
+	}
+}
+
+export const resolverErrors = (
+	values: Record<string, string | boolean>,
+	fields: MarketoFormField[]
+) => {
+	const errors: Record<string, { message: string }> = {}
+
+	fields.forEach((field) => {
+		if ('required' in field && field.required) {
+			if (
+				!(field.id in values) ||
+				values[field.id] === '' ||
+				values[field.id] === false ||
+				values[field.id] === undefined ||
+				values[field.id] === null ||
+				(typeof values[field.id] === 'string' &&
+					(values[field.id] as string).trim() === '')
+			) {
+				errors[field.id] = {
+					message: field.validationMessage ?? 'This field is required.',
+				}
+			}
+		}
+
+		// Validate that select field value is an allowed value
+		if (field.dataType === 'select') {
+			if (
+				field.id in values &&
+				field.fieldMetaData.values &&
+				!field.fieldMetaData.values
+					.map((v) => v.value)
+					.includes(values[field.id] as string)
+			) {
+				errors[field.id] = {
+					message: field.validationMessage ?? 'Please select an option.',
+				}
+			}
+		}
+
+		if (field.dataType === 'email') {
+			if (field.id in values && !isValidEmail(values[field.id] as string)) {
+				errors[field.id] = {
+					message:
+						field.validationMessage ?? 'Please enter a valid email address.',
+				}
+			}
+		}
+	})
+
+	return errors
+}
+
+/**
+ * @param fieldsArr MarketoFormField[]
+ * @returns MarketoFormField[] with columnSplit property set
+ */
+export function setFieldsColumnSplit(fieldsArr: MarketoFormField[]) {
+	return fieldsArr.map((f) => {
+		const columnSplit = getFieldColumnSplit(fieldsArr, f)
+		return { ...f, columnSplit }
+	})
+}
+
+/**
+ * @param allFields MarketoFormField[]
+ * @param field MarketoFormField
+ * @returns the number of fields in the same row as the given field in Marketo
+ */
+export function getFieldColumnSplit(
+	allFields: MarketoFormField[],
+	field: MarketoFormField
+) {
+	return allFields.filter((item) => item.rowNumber === field.rowNumber)?.length
+}

package/src/components/nav-panel/components/link-list/index.tsx

@@ -0,0 +1,88 @@
+import Link from 'next/link'
+import { parseUrl } from '../../../../../../../apps/www/lib/parseUrl'
+import { v } from '@web/cms'
+import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
+import s from './style.module.css'
+
+export interface LinkListProps {
+	links: {
+		title: string
+		url: string
+		icon?: string
+		description?: string
+		iconGradient?: string
+	}[]
+	linkClickHandler?: (title: string, url: string) => void
+}
+
+const GRADIENT_VALUE_MAP = new Map([
+	[
+		'ILM',
+		{
+			iconGradient: 'var(--icon-gradient-infrastructure-lifecycle-management)',
+		},
+	],
+	[
+		'SLM',
+		{
+			iconGradient: 'var(--icon-gradient-security-lifecycle-management)',
+		},
+	],
+	[
+		'Cloud',
+		{
+			iconGradient: 'var(--icon-gradient-infrastructure-cloud)',
+		},
+	],
+])
+
+export default function LinkList({ links, linkClickHandler }: LinkListProps) {
+	return (
+		<ul className={s.linkList}>
+			{links.map((link) => {
+				let style
+				link.iconGradient
+					? (style = {
+							'--iconGradient': GRADIENT_VALUE_MAP.get(v(link.iconGradient))
+								?.iconGradient,
+					  } as React.CSSProperties)
+					: (style = null)
+				return (
+					<li key={link.title}>
+						<NavigationMenu.Link asChild>
+							<Link
+								className={s.link}
+								href={parseUrl(link.url).href}
+								onClickCapture={() => {
+									linkClickHandler && linkClickHandler(link.title, link.url)
+								}}
+							>
+								{link.iconGradient && link.icon ? (
+									<div className={s.iconBackground} style={style}>
+										<FlightIcon name={v(link.icon)} />
+									</div>
+								) : (
+									link.icon && (
+										<FlightIcon
+											name={v(link.icon)}
+											color="var(--token-color-foreground-faint)"
+										/>
+									)
+								)}
+								<div>
+									<div className={link.iconGradient && s.boldTitle}>
+										{link.title}
+									</div>
+									{link.description && (
+										<div className={s.description}>{link.description}</div>
+									)}
+								</div>
+							</Link>
+						</NavigationMenu.Link>
+					</li>
+				)
+			})}
+		</ul>
+	)
+}

package/src/components/nav-panel/components/link-list/style.module.css

@@ -0,0 +1,57 @@
+.linkList {
+	display: flex;
+	list-style: none;
+	flex-direction: column;
+	gap: var(--hdsplus-spacing-03);
+	margin: 0;
+	padding: 0;
+}
+
+.link {
+	color: var(--token-color-foreground-primary);
+	display: flex;
+	gap: var(--hdsplus-spacing-04);
+	padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-04);
+	min-width: 190px;
+	align-items: center;
+
+	&:hover {
+		background-color: var(--token-color-surface-interactive-hover);
+		border-radius: var(--hdsplus-spacing-01);
+	}
+
+	&:has(.iconBackground) {
+		align-items: flex-start;
+	}
+
+	@media (--large) {
+		max-width: 416px;
+	}
+
+	&:focus {
+		outline: 2px solid var(--token-color-focus-action-internal);
+		outline-style: auto;
+	}
+}
+
+.description {
+	font-size: var(--hdsplus-typography-body-200-font-size);
+	font-weight: var(--token-typography-font-weight-regular);
+	margin-top: var(--hdsplus-spacing-02);
+}
+
+.iconBackground {
+	background: var(--iconGradient);
+	height: var(--hdsplus-spacing-08);
+	width: var(--hdsplus-spacing-08);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 3px;
+	flex: none;
+	margin-top: 3px;
+}
+
+.boldTitle {
+	font-weight: var(--font-weight-semi-bold);
+}

package/src/components/nav-panel/components/panel/column/index.tsx

@@ -0,0 +1,9 @@
+import s from './style.module.css'
+
+export interface NavColumnProps {
+	children: React.ReactNode
+}
+
+export default function Column({ children }: NavColumnProps) {
+	return <div className={s.column}>{children}</div>
+}

package/src/components/nav-panel/components/panel/column/style.module.css

@@ -0,0 +1,14 @@
+.column {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	min-width: 190px;
+	padding: 0;
+	margin: 0 var(--hdsplus-spacing-05);
+	border-radius: var(--hdsplus-spacing-03);
+
+	@media (--large) {
+		margin: 0;
+	}
+}

package/src/components/nav-panel/components/panel/index.tsx

@@ -0,0 +1,4 @@
+import Root from './root'
+import Column from './column'
+
+export { Root, Column }

package/src/components/nav-panel/components/panel/root/index.tsx

@@ -0,0 +1,9 @@
+import s from './style.module.css'
+
+interface RootProps {
+	children: React.ReactNode
+}
+
+export default function Root({ children }: RootProps) {
+	return <div className={s.root}>{children}</div>
+}

package/src/components/nav-panel/components/panel/root/style.module.css

@@ -0,0 +1,15 @@
+.root {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	/* stylelint-disable-next-line unit-no-unknown */
+	min-height: calc(100dvh - var(--hdsplus-spacing-12));
+
+	@media (--large) {
+		justify-content: flex-start;
+		height: 100%;
+		min-height: fit-content;
+		gap: var(--hdsplus-spacing-04);
+	}
+}