@hashicorp/react-components 0.0.0-nightly.ad81ac2 → 0.0.0-nightly.b154bf4

package/src/components/marketo-form/utils.test.tsx

@@ -1,103 +0,0 @@
-import {
-	calculateDefaultValues,
-	formattedLabel,
-	groupFields,
-	includesSkippedRecords,
-} from './utils'
-import { UTM_FORM_PROPS, VISIBILITY_RULE_FORM_PROPS } from './fixtures'
-
-describe('formattedLabel', () => {
-	it('does not append asterisk for non-required fields', () => {
-		expect(
-			formattedLabel({
-				id: 'FirstName',
-				label: 'First Name',
-				dataType: 'text',
-				validationMessage: 'This field is required.',
-				rowNumber: 3,
-				columnNumber: 0,
-				required: false,
-				visibilityRules: {
-					ruleType: 'alwaysShow',
-				},
-			})
-		).toBe('First Name')
-	})
-})
-
-describe('groupFields', () => {
-	it('groups fields', () => {
-		const groups = groupFields(UTM_FORM_PROPS.fields.result, {
-			name: {
-				fields: ['FirstName', 'LastName'],
-				component: () => <span>Not used</span>,
-			},
-		})
-		expect(groups).toEqual({
-			name: [UTM_FORM_PROPS.fields.result[0], UTM_FORM_PROPS.fields.result[1]],
-			utm_medium__c: [UTM_FORM_PROPS.fields.result[2]],
-			form_page_url__c: [UTM_FORM_PROPS.fields.result[3]],
-		})
-	})
-})
-
-describe('calculateDefaultValues', () => {
-	it('calculates default values', () => {
-		expect(
-			calculateDefaultValues(VISIBILITY_RULE_FORM_PROPS.fields.result)
-		).toEqual({
-			FirstName: '',
-			LastName: '',
-			Phone: '',
-			fastTracktoSales: false,
-		})
-	})
-
-	it('accounts for passed in values', () => {
-		expect(
-			calculateDefaultValues(UTM_FORM_PROPS.fields.result, {
-				form_page_url__c: 'http',
-			})
-		).toEqual({
-			FirstName: '',
-			LastName: '',
-			utm_medium__c: '',
-			form_page_url__c: 'http',
-		})
-	})
-})
-
-describe('includesSkippedRecords', () => {
-	it('returns true when containing skipped records', () => {
-		const response = {
-			requestId: 'f8a8#185cc1e96b9',
-			result: [
-				{
-					status: 'skipped' as const,
-					reasons: [
-						{
-							code: '1003',
-							message:
-								"Invalid value for field 'email' and value 'dylan.staley@hashicorp.co.k'",
-						},
-					],
-				},
-			],
-			success: true,
-		}
-		expect(includesSkippedRecords(response)).toBe(true)
-	})
-
-	it('returns false when not containing skipped records', () => {
-		const response = {
-			requestId: 'f8a8#185cc1e96b9',
-			result: [
-				{
-					status: 'created' as const,
-				},
-			],
-			success: true,
-		}
-		expect(includesSkippedRecords(response)).toBe(false)
-	})
-})

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

@@ -1,449 +0,0 @@
-/**
- * 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[]) {
-	if (!fieldsArr) {
-		return []
-	}
-
-	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

@@ -1,138 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-'use client'
-
-import { useState } 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 { HDSPlusStandaloneLink } from '@hashicorp/react-mds/src/hds-plus/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 { themeClass } = useProductMeta(theme)
-	return (
-		<section
-			className={classNames(s.nextSteps, s[appearance], themeClass)}
-			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>
-							<HDSPlusStandaloneLink
-								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] = 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>
-	)
-}