@hashicorp/react-components 0.0.0 → 1.0.0

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

@@ -0,0 +1,320 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import nock from 'nock'
+import userEvent from '@testing-library/user-event'
+import MarketoForm from './'
+import {
+	BASIC_FORM_PROPS,
+	UTM_FORM_PROPS,
+	VISIBILITY_RULE_FORM_PROPS,
+	COOKIE_UTM_FORM_PROPS,
+	HIDDEN_COOKIE_FIELD_FORM_PROPS,
+} from './fixtures'
+import cookie from 'js-cookie'
+
+describe('MarketoForm', () => {
+	let originalLocation
+	let spy
+
+	beforeAll(() => {
+		originalLocation = window.location
+	})
+
+	beforeEach(() => {
+		nock('http://local.test')
+			.persist()
+			.post('/api/marketo/submit')
+			.reply(200, { success: true, result: [] })
+
+		delete window.location
+		window.location = {
+			// We use an absolute URL here since fetch in Jest can't use relative URLs
+			origin: 'http://local.test',
+			protocol: 'http:',
+			host: 'local.test',
+			pathname: '/testing',
+			href: 'http://local.test/testing?utm_medium=social',
+			search: '?utm_medium=social',
+		}
+
+		spy = vi.spyOn(global, 'fetch')
+	})
+
+	afterEach(() => {
+		vi.resetAllMocks()
+		spy.mockRestore()
+		window.location = originalLocation
+	})
+
+	afterAll(() => {
+		nock.restore()
+	})
+
+	test('renders form with provided fields', async () => {
+		render(<MarketoForm {...BASIC_FORM_PROPS} />)
+
+		const firstNameField = screen.getByLabelText(/First Name/)
+		const lastNameField = screen.getByLabelText(/Last Name/)
+		expect(firstNameField).toBeInTheDocument()
+		expect(lastNameField).toBeInTheDocument()
+	})
+
+	test('submits form data', async () => {
+		render(<MarketoForm {...BASIC_FORM_PROPS} />)
+
+		const firstNameField = screen.getByLabelText(/First Name/)
+		expect(firstNameField).toBeInTheDocument()
+		userEvent.type(firstNameField, 'Michael')
+
+		const lastNameField = screen.getByLabelText(/Last Name/)
+		expect(lastNameField).toBeInTheDocument()
+		userEvent.type(lastNameField, 'Burnham')
+
+		const submitButton = screen.getByText('Submit')
+		expect(submitButton).toBeInTheDocument()
+		userEvent.click(submitButton)
+
+		await waitFor(() => expect(spy).toHaveBeenCalled())
+		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				input: [
+					{
+						leadFormFields: {
+							firstName: 'Michael',
+							lastName: 'Burnham',
+						},
+						visitorData: {
+							pageURL: 'http://local.test/testing?utm_medium=social',
+						},
+					},
+				],
+				formId: 9999,
+			}),
+		})
+	})
+
+	test('submits with initial values', async () => {
+		render(
+			<MarketoForm
+				{...BASIC_FORM_PROPS}
+				initialValues={{ LastName: 'Burnham' }}
+			/>
+		)
+
+		const firstNameField = screen.getByLabelText(/First Name/)
+		expect(firstNameField).toBeInTheDocument()
+		userEvent.type(firstNameField, 'Michael')
+
+		const submitButton = screen.getByText('Submit')
+		expect(submitButton).toBeInTheDocument()
+		userEvent.click(submitButton)
+
+		await waitFor(() => expect(spy).toHaveBeenCalled())
+		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				input: [
+					{
+						leadFormFields: {
+							firstName: 'Michael',
+							lastName: 'Burnham',
+						},
+						visitorData: {
+							pageURL: 'http://local.test/testing?utm_medium=social',
+						},
+					},
+				],
+				formId: 9999,
+			}),
+		})
+	})
+
+	test('submits form data with UTM params', async () => {
+		render(<MarketoForm {...UTM_FORM_PROPS} />)
+
+		const firstNameField = screen.getByLabelText(/First Name/)
+		expect(firstNameField).toBeInTheDocument()
+		userEvent.type(firstNameField, 'Michael')
+
+		const lastNameField = screen.getByLabelText(/Last Name/)
+		expect(lastNameField).toBeInTheDocument()
+		userEvent.type(lastNameField, 'Burnham')
+
+		const submitButton = screen.getByText('Submit')
+		expect(submitButton).toBeInTheDocument()
+		userEvent.click(submitButton)
+
+		await waitFor(() => expect(spy).toHaveBeenCalled())
+		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				input: [
+					{
+						leadFormFields: {
+							firstName: 'Michael',
+							lastName: 'Burnham',
+							utm_medium__c: 'social',
+							form_page_url__c: 'http://local.test/testing',
+						},
+						visitorData: {
+							pageURL: 'http://local.test/testing?utm_medium=social',
+						},
+					},
+				],
+				formId: 9999,
+			}),
+		})
+	})
+
+	test('submits form data with UTM params from cookies', async () => {
+		cookie.get = vi.fn().mockImplementation(() => {
+			return { utm_content: 'utm-content-cookie-val' }
+		})
+		render(<MarketoForm {...COOKIE_UTM_FORM_PROPS} />)
+
+		const firstNameField = screen.getByLabelText(/First Name/)
+		expect(firstNameField).toBeInTheDocument()
+		userEvent.type(firstNameField, 'Michael')
+
+		const lastNameField = screen.getByLabelText(/Last Name/)
+		expect(lastNameField).toBeInTheDocument()
+		userEvent.type(lastNameField, 'Burnham')
+
+		const submitButton = screen.getByText('Submit')
+		expect(submitButton).toBeInTheDocument()
+		userEvent.click(submitButton)
+
+		await waitFor(() => expect(spy).toHaveBeenCalled())
+		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				input: [
+					{
+						leadFormFields: {
+							firstName: 'Michael',
+							lastName: 'Burnham',
+							utm_content__c: 'utm-content-cookie-val',
+						},
+						visitorData: {
+							pageURL: 'http://local.test/testing?utm_medium=social',
+						},
+					},
+				],
+				formId: 9999,
+			}),
+		})
+	})
+
+	test('renders built-in error validation messages', async () => {
+		render(<MarketoForm {...BASIC_FORM_PROPS} />)
+
+		const firstNameField = screen.getByLabelText(/First Name/)
+		expect(firstNameField).toBeInTheDocument()
+		userEvent.click(firstNameField)
+
+		const lastNameField = screen.getByLabelText(/Last Name/)
+		expect(lastNameField).toBeInTheDocument()
+		userEvent.click(lastNameField)
+
+		const errorMessage = await screen.findByText('This field is required.')
+		expect(errorMessage).toBeInTheDocument()
+	})
+
+	test('renders additional error validation messages', async () => {
+		render(
+			<MarketoForm
+				{...BASIC_FORM_PROPS}
+				validateFields={async (values, errors) => {
+					return {
+						values,
+						errors: {
+							...errors,
+							FirstName: {
+								message: `${errors.FirstName.message} Additional message.`,
+							},
+						},
+					}
+				}}
+			/>
+		)
+
+		const firstNameField = screen.getByLabelText(/First Name/)
+		expect(firstNameField).toBeInTheDocument()
+		userEvent.click(firstNameField)
+
+		const lastNameField = screen.getByLabelText(/Last Name/)
+		expect(lastNameField).toBeInTheDocument()
+		userEvent.click(lastNameField)
+
+		const errorMessage = await screen.findByText(
+			'This field is required. Additional message.'
+		)
+		expect(errorMessage).toBeInTheDocument()
+	})
+
+	test('handles simple visibility rules', async () => {
+		render(<MarketoForm {...VISIBILITY_RULE_FORM_PROPS} />)
+
+		expect(screen.queryByLabelText('Phone Number')).toBeNull()
+
+		const fastTrackField = screen.getByLabelText('Have salesperson contact me')
+		expect(fastTrackField).toBeInTheDocument()
+		userEvent.click(fastTrackField)
+
+		expect(screen.getByLabelText('Phone Number')).toBeInTheDocument()
+	})
+
+	test('submits form with cookie values for hidden fields', async () => {
+		cookie.get = vi.fn().mockImplementation(() => {
+			return 'hidden-cookie-field-val'
+		})
+		render(<MarketoForm {...HIDDEN_COOKIE_FIELD_FORM_PROPS} />)
+
+		const firstNameField = screen.getByLabelText(/First Name/)
+		expect(firstNameField).toBeInTheDocument()
+		userEvent.type(firstNameField, 'Michael')
+
+		const lastNameField = screen.getByLabelText(/Last Name/)
+		expect(lastNameField).toBeInTheDocument()
+		userEvent.type(lastNameField, 'Burnham')
+
+		const submitButton = screen.getByText('Submit')
+		expect(submitButton).toBeInTheDocument()
+		userEvent.click(submitButton)
+
+		await waitFor(() => expect(spy).toHaveBeenCalled())
+		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				input: [
+					{
+						leadFormFields: {
+							firstName: 'Michael',
+							lastName: 'Burnham',
+							cookieHiddenField: 'hidden-cookie-field-val',
+						},
+						visitorData: {
+							pageURL: 'http://local.test/testing?utm_medium=social',
+						},
+					},
+				],
+				formId: 9999,
+			}),
+		})
+	})
+})

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

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext, useFormState, useWatch } from 'react-hook-form'
+import Form, { defaultFieldGroupings } from './form'
+import Field from './partials/field'
+
+export { useFormContext, useFormState, useWatch, defaultFieldGroupings, Field }
+export default Form

package/src/components/marketo-form/package.original.json

@@ -0,0 +1,30 @@
+{
+  "name": "@hashicorp/react-marketo-form",
+  "description": "A form component that dynamically renders a Marketo form",
+  "version": "0.9.0",
+  "author": "HashiCorp",
+  "contributors": [
+    "Dylan Staley"
+  ],
+  "dependencies": {
+    "@hashicorp/platform-analytics": "^0.11.2",
+    "@hashicorp/react-button": "^6.2.0",
+    "@hashicorp/react-form-fields": "^0.2.0",
+    "@vercel/fetch": "^6.2.0",
+    "clsx": "^1.1.1",
+    "js-cookie": "^3.0.1",
+    "moize": "^6.1.3",
+    "react-hook-form": "^7.37.0"
+  },
+  "license": "MPL-2.0",
+  "peerDependencies": {
+    "next": ">=11.x",
+    "react": ">=16.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.2"
+  }
+}

package/src/components/marketo-form/partials/error-message/index.tsx

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import styles from './style.module.css'
+
+const ErrorMessage = ({ error }: { error: string }) => {
+	return <div className={styles.errorText}>{error}</div>
+}
+
+export default ErrorMessage

package/src/components/marketo-form/partials/error-message/style.module.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.errorText {
+  --error-text-color: var(--danger);
+
+  composes: g-type-body-small from global;
+  color: var(--error-text-color);
+  line-height: 1.4;
+  margin-top: 4px;
+}

package/src/components/marketo-form/partials/field/index.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import TextField from '../fields/text-field'
+import EmailField from '../fields/email-field'
+import TelephoneField from '../fields/telephone-field'
+import TextareaField from '../fields/textarea-field'
+import SelectField from '../fields/select-field'
+import CheckboxField from '../fields/checkbox-field'
+import HiddenField from '../fields/hidden-field'
+import HtmltextField from '../fields/htmltext-field'
+import RadioButtonsField from '../fields/radio-buttons-field'
+import FormPageUrlField from '../fields/form-page-url-field'
+import type { MarketoFormField, MarketoFormComponents } from '../../types'
+
+const Field = ({
+	field,
+	components,
+}: {
+	field: MarketoFormField
+	components?: MarketoFormComponents
+}) => {
+	switch (field.dataType) {
+		case 'text':
+			if (components && 'text' in components) {
+				const Component = components.text!
+				return <Component field={field} />
+			}
+			return <TextField field={field} />
+		case 'textArea':
+			if (components && 'textArea' in components) {
+				const Component = components.textArea!
+				return <Component field={field} />
+			}
+			return <TextareaField field={field} />
+		case 'email':
+			if (components && 'email' in components) {
+				const Component = components.email!
+				return <Component field={field} />
+			}
+			return <EmailField field={field} />
+		case 'telephone':
+			if (components && 'telephone' in components) {
+				const Component = components.telephone!
+				return <Component field={field} />
+			}
+			return <TelephoneField field={field} />
+		case 'select':
+			if (components && 'select' in components) {
+				const Component = components.select!
+				return <Component field={field} />
+			}
+			return <SelectField field={field} />
+		case 'checkbox':
+			if (components && 'checkbox' in components) {
+				const Component = components.checkbox!
+				return <Component field={field} />
+			}
+			return <CheckboxField field={field} />
+		case 'hidden':
+			if (components && 'hidden' in components) {
+				const Component = components.hidden!
+				return <Component field={field} />
+			}
+			if (field.id === 'form_page_url__c') {
+				return <FormPageUrlField field={field} />
+			}
+			return <HiddenField field={field} />
+		case 'htmltext':
+			if (components && 'htmltext' in components) {
+				const Component = components.htmltext!
+				return <Component field={field} />
+			}
+			return <HtmltextField field={field} />
+		case 'radioButtons':
+			if (components && 'radioButtons' in components) {
+				const Component = components.radioButtons!
+				return <Component field={field} />
+			}
+			return <RadioButtonsField field={field} />
+		default:
+			console.error(`Unknown form field type: ${(field as any).Datatype}`)
+	}
+
+	return null
+}
+
+export default Field

package/src/components/marketo-form/partials/field-wrapper/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { ReactNode } from 'react'
+
+const FieldWrapper = ({
+	children,
+	fieldId,
+}: {
+	children: ReactNode
+	fieldId: string
+}) => {
+	return (
+		<div
+			style={{ marginBottom: '1rem' }}
+			className="marketo-form-field-wrapper"
+			data-field-id={fieldId}
+		>
+			{children}
+		</div>
+	)
+}
+
+export default FieldWrapper

package/src/components/marketo-form/partials/fields/checkbox-field/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+// import CheckboxInput from '@hashicorp/react-form-fields/checkbox'
+import Checkbox from '@hashicorp/react-design-system-components/src/components/form/checkbox'
+import FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormCheckboxField } from '../../../types'
+
+const CheckboxField = ({ field }: { field: MarketoFormCheckboxField }) => {
+	const { register, watch } = useFormContext()
+	const error = useErrorMessage(field.id)
+	const checked = watch(field.id, false)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<Checkbox
+				label={formattedLabel(field)}
+				field={{
+					...register(field.id),
+					checked,
+				}}
+				error={error}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default CheckboxField

package/src/components/marketo-form/partials/fields/email-field/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+// import TextInput from '@hashicorp/react-form-fields/text'
+import TextInput from '@hashicorp/react-design-system-components/src/components/form/text-input'
+import FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormEmailField } from '../../../types'
+
+const EmailField = ({ field }: { field: MarketoFormEmailField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<TextInput
+				label={formattedLabel(field)}
+				type="email"
+				field={{
+					...register(field.id),
+					type: 'email',
+					placeholder: field.hintText,
+				}}
+				size="large"
+				error={error}
+				isRequired={field.required}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default EmailField

package/src/components/marketo-form/partials/fields/form-page-url-field/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import type { MarketoFormHiddenField } from '../../../types'
+
+const FormPageUrlField = ({ field }: { field: MarketoFormHiddenField }) => {
+	const { register, setValue } = useFormContext()
+
+	useEffect(() => {
+		const { protocol, host, pathname } = window.location
+		setValue(field.id, `${protocol}//${host}${pathname}`)
+	}, [])
+
+	return <input type="hidden" {...register(field.id)} />
+}
+
+export default FormPageUrlField

package/src/components/marketo-form/partials/fields/hidden-field/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import type { MarketoFormHiddenField } from '../../../types'
+import cookies from 'js-cookie'
+
+const HiddenField = ({ field }: { field: MarketoFormHiddenField }) => {
+	const { register, setValue } = useFormContext()
+
+	useEffect(() => {
+		if (field.autoFill && field.autoFill.valueFrom === 'query') {
+			const searchParams = new URLSearchParams(window.location.search)
+			if (searchParams.has(field.autoFill.parameterName)) {
+				setValue(field.id, searchParams.get(field.autoFill.parameterName))
+			}
+		} else if (
+			field.autoFill &&
+			field.autoFill.valueFrom === 'default' &&
+			field.autoFill.value
+		) {
+			setValue(field.id, field.autoFill.value)
+		} else if (field.autoFill && field.autoFill.valueFrom === 'cookie') {
+			const fieldCookieValue = cookies.get(field.autoFill.parameterName)
+			if (fieldCookieValue) {
+				setValue(field.id, fieldCookieValue)
+			}
+		}
+	}, [field, setValue])
+
+	return <input type="hidden" {...register(field.id)} />
+}
+
+export default HiddenField

package/src/components/marketo-form/partials/fields/htmltext-field/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import FieldWrapper from '../../field-wrapper'
+import type { MarketoFormHtmltextField } from '../../../types'
+import styles from './style.module.css'
+
+const Index = ({ field }: { field: MarketoFormHtmltextField }) => {
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<span
+				className={styles.htmltext}
+				dangerouslySetInnerHTML={{ __html: field.text }}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default Index

package/src/components/marketo-form/partials/fields/htmltext-field/style.module.css

@@ -0,0 +1,6 @@
+.htmltext {
+  composes: g-type-body-small from global;
+  color: var(--wpl-neutral-500);
+  margin-top: var(--wpl-spacing-02);
+  margin-bottom: var(--wpl-spacing-05);
+}

package/src/components/marketo-form/partials/fields/name-field/index.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import TextField from '../text-field'
+import type { MarketoFormField, MarketoFormTextField } from '../../../types'
+import styles from './style.module.css'
+
+const NameFields = ({ fields }: { fields: MarketoFormField[] }) => {
+	return (
+		<div className={styles.name}>
+			<TextField field={fields[0] as MarketoFormTextField} />
+			<TextField field={fields[1] as MarketoFormTextField} />
+		</div>
+	)
+}
+
+export default NameFields