@hashicorp/react-components 0.0.0 → 1.0.0

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.name {
+  display: grid;
+  grid-gap: 8px;
+  @media (--medium-up) {
+    grid-gap: 32px;
+    grid-template-columns: 1fr 1fr;
+  }
+}

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

@@ -0,0 +1,48 @@
+import { useFormContext } from 'react-hook-form'
+import RadioCard, {
+	RadioCardGroup,
+} from '@hashicorp/react-design-system-components/src/components/form/radio-card'
+import FieldWrapper from '../../field-wrapper'
+import type { MarketoFormRadioButtonsField } from '../../../types'
+
+const RadioCardField = ({ field }: { field: MarketoFormRadioButtonsField }) => {
+	const {
+		register,
+		watch,
+		formState: { errors },
+	} = useFormContext()
+	const error = errors[field.id]?.message as string
+	const currentSelection = watch(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<RadioCardGroup
+				error={error}
+				layout="vertical"
+				isRequired={field.required}
+				legend={field.label}
+				id={field.id}
+				aria-describedby={error && `error-${field.id}-error`}
+			>
+				{field.fieldMetaData.values.map(({ label, value }) => (
+					<RadioCard
+						controlPosition="left"
+						key={value}
+						label={label}
+						field={{
+							...register(field.id, { required: field.validationMessage }),
+							checked: currentSelection === value,
+							value,
+							name: field.id,
+							required: field.required,
+							'aria-invalid': Boolean(errors[field.id]),
+							'aria-describedby': error && `error-${field.id}-error`,
+						}}
+					/>
+				))}
+			</RadioCardGroup>
+		</FieldWrapper>
+	)
+}
+
+export default RadioCardField

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

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+import Select from '@hashicorp/react-design-system-components/src/components/form/select'
+import FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormSelectField } from '../../../types'
+import s from './style.module.css'
+
+const SelectField = ({ field }: { field: MarketoFormSelectField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<Select
+				field={{ ...register(field.id) }}
+				size="large"
+				label={formattedLabel(field)}
+				error={error}
+				isRequired={field.required}
+				className={s.selectConstrainWidth}
+			>
+				{field.fieldMetaData.values
+					? field.fieldMetaData.values.map(({ label, value }) => (
+							<option key={label} value={value}>
+								{label}
+							</option>
+					  ))
+					: []}
+			</Select>
+		</FieldWrapper>
+	)
+}
+
+export default SelectField

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

@@ -0,0 +1,5 @@
+.selectConstrainWidth {
+	& select {
+		width: 100%;
+	}
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+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 { MarketoFormTelephoneField } from '../../../types'
+
+const TelephoneField = ({ field }: { field: MarketoFormTelephoneField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<TextInput
+				label={formattedLabel(field)}
+				type="tel"
+				field={{ ...register(field.id), placeholder: field.hintText }}
+				size="large"
+				error={error}
+				isRequired={field.required}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default TelephoneField

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+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 { MarketoFormTextField } from '../../../types'
+
+const Index = ({ field }: { field: MarketoFormTextField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<TextInput
+				label={formattedLabel(field)}
+				type="text"
+				field={{ ...register(field.id), placeholder: field.hintText }}
+				size="large"
+				error={error}
+				isRequired={field.required}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default Index

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import clsx from 'clsx'
+import s from './style.module.css'
+
+interface LabelProps {
+	label: string
+	fieldName: string
+	className?: string
+}
+
+export default function Label({ label, fieldName, className }: LabelProps) {
+	return (
+		<label
+			htmlFor={fieldName}
+			className={clsx(className && className, s.label)}
+		>
+			{label}
+		</label>
+	)
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.label {
+  color: var(--gray-3);
+  composes: g-type-label from global;
+  display: block;
+  padding-bottom: 8px;
+  text-transform: uppercase;
+}

package/src/components/marketo-form/partials/visibility-rule/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useMemo } from 'react'
+import { useFormContext } from 'react-hook-form'
+import Field from '../field'
+import type {
+	MarketoFormField,
+	MarketoFormComponents,
+	VisibilityRule as VisibilityRuleType,
+} from '../../types'
+
+function ruleApplies(rule: VisibilityRuleType, value: any): boolean {
+	switch (rule.operator) {
+		case 'is':
+			return (
+				rule.values.includes(value) ||
+				(value === false && rule.values.includes('no')) ||
+				(value === true && rule.values.includes('yes'))
+			)
+		case 'isNot':
+			return !rule.values.includes(value)
+		case 'isEmpty':
+			return value === null || typeof value === 'undefined' || value === ''
+		default:
+			return false
+	}
+}
+
+const FieldWithVisibilityRule = ({
+	field,
+	components,
+}: {
+	field: MarketoFormField
+	components?: MarketoFormComponents
+}) => {
+	const { watch } = useFormContext()
+
+	// Currently we only support the first defined rule.
+	const value = watch(field.visibilityRules!.rules![0].subjectField)
+
+	const hasMatchingRule = useMemo(() => {
+		return field.visibilityRules!.rules!.some((rule) =>
+			ruleApplies(rule, value)
+		)
+	}, [field, value])
+
+	if (
+		hasMatchingRule &&
+		(field.visibilityRules!.ruleType === 'show' ||
+			field.visibilityRules!.ruleType === 'hide')
+	) {
+		return field.visibilityRules!.ruleType === 'show' ? (
+			<Field field={field} components={components} />
+		) : null
+	}
+
+	// If the ruleType is show, that means the field is hidden by default.
+	return field.visibilityRules!.ruleType === 'show' ? null : (
+		<Field field={field} components={components} />
+	)
+}
+
+const VisibilityRule = ({
+	field,
+	components,
+}: {
+	field: MarketoFormField
+	components?: MarketoFormComponents
+}) => {
+	if (
+		field.visibilityRules &&
+		(field.visibilityRules.ruleType === 'show' ||
+			field.visibilityRules.ruleType === 'hide')
+	) {
+		return <FieldWithVisibilityRule field={field} components={components} />
+	}
+
+	return <Field field={field} components={components} />
+}
+
+export default VisibilityRule

package/src/components/marketo-form/props.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+module.exports = {
+	formId: {
+		type: 'number',
+		required: true,
+		description:
+			'The numeric ID of the Marketo form that this component is rendering.',
+	},
+	marketoForm: {
+		type: 'object',
+		required: true,
+		description:
+			'The API response containing the fields of the form this component should render.',
+	},
+	groups: {
+		type: 'object',
+		description:
+			'Mapping of fields that should be rendered with a single component.',
+	},
+	components: {
+		type: 'object',
+		description: 'Custom components to use instead of the built-in components',
+		properties: {
+			text: {
+				type: 'React.ComponentType',
+				description: 'Component to use for text fields',
+			},
+			email: {
+				type: 'React.ComponentType',
+				description: 'Component to use for email fields',
+			},
+			select: {
+				type: 'React.ComponentType',
+				description: 'Component to use for select fields',
+			},
+			checkbox: {
+				type: 'React.ComponentType',
+				description: 'Component to use for checkbox fields',
+			},
+			hidden: {
+				type: 'React.ComponentType',
+				description: 'Component to use for hidden fields',
+			},
+		},
+	},
+	submitTitle: {
+		type: 'string',
+		description: 'Title to use for the submit button',
+	},
+	className: {
+		type: 'string',
+		description: 'Additional classNames passed to the form element.',
+	},
+	onSubmitSuccess: {
+		type: 'function',
+		description: 'Callback function invoked on submission success',
+	},
+	onSubmitFailure: {
+		type: 'function',
+		description: 'Callback function invoked on submission failure',
+	},
+}

package/src/components/marketo-form/server/api-routes.ts

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import * as client from './client'
+import { includesSkippedRecords } from '../utils'
+import type { SubmissionFilter, MarketoSubmissionResponse } from '../types'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+async function notifyError(body: unknown, err: unknown) {
+	if (process.env.MARKETO_ERROR_ZAPIER_WEBHOOK) {
+		try {
+			await fetch(process.env.MARKETO_ERROR_ZAPIER_WEBHOOK, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({ body, err }, null, 2),
+			})
+		} catch (err) {
+			console.error({ body, err })
+		}
+	}
+
+	return Promise.resolve()
+}
+
+function isE2ETest(req: NextApiRequest): boolean {
+	// running e2e tests locally
+	if (process.env.E2E_TESTS === 'true') {
+		return true
+	}
+
+	// running e2e tests against a Vercel preview
+	if (
+		'input' in req.body &&
+		req.body.input.length > 0 &&
+		req.body.input[0].leadFormFields.email === 'daniela.rod@example.com'
+	) {
+		return true
+	}
+
+	return false
+}
+
+async function submitForm(
+	req: NextApiRequest,
+	res: NextApiResponse,
+	{
+		submissionFilter,
+	}: {
+		submissionFilter?: SubmissionFilter
+	}
+) {
+	// Don't submit forms to the Marketo API when using E2E tests.
+	if (isE2ETest(req)) {
+		res.status(200).json({
+			requestId: '7d85#181a7ae5e56',
+			result: [
+				{
+					id: 25325329,
+					status: 'updated',
+				},
+			],
+			success: true,
+		})
+		return
+	}
+
+	try {
+		const passesSubmissionFilter = submissionFilter
+			? await submissionFilter(req)
+			: true
+		if (!passesSubmissionFilter) {
+			// trick spammers into thinking their form submitted successfully
+			res.status(200).json({ success: true })
+			return
+		}
+		const marketoRes = await client.submitForm(req.body)
+		const form = (await marketoRes.json()) as MarketoSubmissionResponse
+		if (!form.success || includesSkippedRecords(form)) {
+			await notifyError(req.body, form)
+		}
+		res.status(marketoRes.status).json(form)
+	} catch (err) {
+		await notifyError(req.body, err)
+		res.status(500).json({ error: 'internal server error' })
+		throw err
+	}
+}
+
+export function buildApiRoutes({
+	submissionFilter,
+}: {
+	submissionFilter?: SubmissionFilter
+} = {}) {
+	return async function apiRoutes(req: NextApiRequest, res: NextApiResponse) {
+		const route = Array.isArray(req.query.marketo)
+			? req.query.marketo[0]
+			: req.query.marketo
+		switch (route) {
+			case 'submit':
+				return submitForm(req, res, { submissionFilter })
+			default:
+				return res.status(404).json({ error: 'not found' })
+		}
+	}
+}

package/src/components/marketo-form/server/client.ts

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import moize from 'moize'
+import type {
+	MarketoFormFieldsResponse,
+	MarketoFormMetadataResponse,
+	MarketoFormAPIResponse,
+} from '../types'
+
+interface MarketoTokenResponse {
+	access_token: string
+}
+
+export async function getToken(): Promise<MarketoTokenResponse> {
+	const url = new URL(`${process.env.MARKETO_IDENTITY}/oauth/token`)
+	url.searchParams.append('grant_type', 'client_credentials')
+	url.searchParams.append('client_id', process.env.MARKETO_CLIENT_ID!)
+	url.searchParams.append('client_secret', process.env.MARKETO_CLIENT_SECRET!)
+	const res = await fetch(url.toString())
+	return await res.json()
+}
+
+export async function getForm(formId: number) {
+	return await fetch(`https://content.hashicorp.com/api/marketo?id=${formId}`)
+}
+
+export async function getDraftFormProps(formId: number) {
+	const { access_token } = await getToken()
+
+	const fieldsResponse = await fetch(
+		`${process.env.MARKETO_ENDPOINT}/asset/v1/form/${formId}/fields.json?status=draft`,
+		{
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${access_token}`,
+			},
+		}
+	)
+
+	const metadataResponse = await fetch(
+		`${process.env.MARKETO_ENDPOINT}/asset/v1/form/${formId}.json?status=draft`,
+		{
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${access_token}`,
+			},
+		}
+	)
+
+	const [fields, metadata] = await Promise.all([
+		fieldsResponse.json(),
+		metadataResponse.json(),
+	])
+
+	return { fields, metadata }
+}
+
+export async function getFormProps(
+	id: number
+): Promise<MarketoFormAPIResponse> {
+	const res = await getForm(id)
+	if (res.status !== 200) {
+		throw new Error(
+			`[marketo-form] non-200 status code when requesting form ${id}: ${res.status}`
+		)
+	}
+
+	const form = (await res.json()) as {
+		result: {
+			fields: MarketoFormFieldsResponse
+			metadata: MarketoFormMetadataResponse
+		}
+	}
+
+	return form.result
+}
+export const memoizedGetFormProps = moize(getFormProps, {
+	isPromise: true,
+	maxAge: 60 * 1000, // 60 seconds
+})
+
+export async function submitForm(body: unknown) {
+	const { access_token } = await getToken()
+	return await fetch(
+		`${process.env.MARKETO_ENDPOINT}/v1/leads/submitForm.json`,
+		{
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${access_token}`,
+			},
+			body: JSON.stringify(body),
+		}
+	)
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { buildApiRoutes } from './api-routes'
+
+export { buildApiRoutes }