@hashicorp/react-components 0.0.0 → 1.0.0

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/next-steps/index.tsx

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import * as React from 'react'
+import Badge from '@hashicorp/react-badge'
+import classNames from 'classnames'
+import ExpandableArrow from '@hashicorp/react-expandable-arrow'
+import Intro from '../intro'
+import Link from 'next/link'
+import type { NextStepsProps } from './types'
+import StandaloneLink from '@hashicorp/react-design-system-components/src/components/standalone-link'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import useProductMeta from '@hashicorp/platform-product-meta'
+import s from './style.module.css'
+
+export default function NextSteps({
+	appearance = 'light',
+	theme = 'hashicorp',
+	heading,
+	description,
+	steps,
+	cta,
+}: NextStepsProps) {
+	const { slug, themeClass } = useProductMeta(theme)
+
+	return (
+		<section
+			className={classNames(
+				s.nextSteps,
+				s[appearance],
+				themeClass,
+				slug && s[slug]
+			)}
+			data-testid="next-steps"
+		>
+			<div className={s.container}>
+				<div className={s.content}>
+					<Intro
+						appearance={appearance}
+						heading={heading}
+						description={description}
+					/>
+				</div>
+				<div className={s.stepsWrapper}>
+					<ul className={s.stepsList}>
+						{steps.map((step, index) => {
+							const isFeatured = steps.length === 3 && index === 0
+							const variant = index === 0 ? 'primary' : 'secondary'
+							return (
+								<li
+									// eslint-disable-next-line react/no-array-index-key
+									key={index}
+									className={classNames(
+										s.stepsListItem,
+										isFeatured && s.stepsListItemFeature
+									)}
+								>
+									<Tile
+										badge={step.badge}
+										theme={theme}
+										variant={variant}
+										cta={{
+											title: step.cta.title,
+											url: step.cta.url,
+										}}
+										heading={step.heading}
+										description={step.description}
+									/>
+								</li>
+							)
+						})}
+					</ul>
+					{cta ? (
+						<div className={s.cta}>
+							<p className={s.ctaCopy}>{cta.copy}</p>
+							<StandaloneLink
+								href={cta.href}
+								text={cta.ctaText}
+								icon={
+									<IconArrowRight16
+										width="100%"
+										height="100%"
+										style={{ display: 'block' }}
+									/>
+								}
+								iconPosition="trailing"
+							/>
+						</div>
+					) : null}
+				</div>
+			</div>
+		</section>
+	)
+}
+
+function Tile({ theme, variant, heading, badge, description, cta }) {
+	const [isHovered, setIsHovered] = React.useState(false)
+	return (
+		<Link href={cta.url} legacyBehavior>
+			<a
+				className={classNames(s.tile, s[variant])}
+				onMouseOver={() => {
+					setIsHovered(true)
+				}}
+				onMouseOut={() => {
+					setIsHovered(false)
+				}}
+			>
+				<div className={s.tileInner}>
+					<h3 className={s.tileHeading}>
+						<span className={s.tileHeadingText}>{heading}</span>
+						{badge ? <BadgeWrapper theme={theme}>{badge}</BadgeWrapper> : null}
+					</h3>
+					{description ? (
+						<p className={s.tileDescription}>{description}</p>
+					) : null}
+					<span className={s.tileCta}>
+						<span className={s.tileCtaLabel}>{cta.title}</span>
+						<span className={s.tileCtaIcon}>
+							<ExpandableArrow expanded={isHovered} />
+						</span>
+					</span>
+				</div>
+				<span className={s.tileScrim} />
+			</a>
+		</Link>
+	)
+}
+
+const BadgeWrapper = ({ theme, children }) => {
+	const badgeTheme = theme === 'hashicorp' ? 'action' : theme
+	const page = theme === 'hashicorp' ? 'action' : 'actionFaint'
+
+	return (
+		<span className={s.tileBadge}>
+			<Badge theme={badgeTheme} page={page}>
+				{children}
+			</Badge>
+		</span>
+	)
+}