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

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

@@ -1,84 +0,0 @@
-/**
- * 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

@@ -1,66 +0,0 @@
-/**
- * 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

@@ -1,109 +0,0 @@
-/**
- * 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

@@ -1,98 +0,0 @@
-/**
- * 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

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

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

@@ -1,267 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { NextApiRequest } from 'next'
-
-export type MarketoFormDatatype =
-	| 'text'
-	| 'email'
-	| 'telephone'
-	| 'textArea'
-	| 'select'
-	| 'checkbox'
-	| 'hidden'
-	| 'htmltext'
-	| 'radioButtons'
-	| 'fieldset'
-
-export interface Autofill {
-	value: string
-	valueFrom: string
-	parameterName: string
-}
-
-export interface VisibilityRule {
-	subjectField: string
-	operator: 'is' | 'isNot' | 'isEmpty'
-	values: string[]
-	altLabel: string
-}
-
-export interface VisibilityRules {
-	rules?: VisibilityRule[]
-	ruleType: 'alwaysShow' | 'show' | 'hide'
-}
-
-export interface MarketoBaseFormField {
-	id: string
-	dataType: MarketoFormDatatype
-	rowNumber: number
-	columnNumber: number
-	defaultValue?: string
-	label?: string
-	required?: boolean
-	validationMessage?: string
-	autoFill?: Autofill
-	visibilityRules?: VisibilityRules
-	/**
-	 * Properties that are not part of the Marketo API response but are
-	 * attached to the field at runtime for additional functionality
-	 */
-	runtimeAttributes?: Record<string, unknown>
-}
-
-export interface MarketoFormTextField extends MarketoBaseFormField {
-	dataType: 'text'
-	hintText?: string
-	maxLength?: number
-	formPrefill?: boolean
-}
-
-export interface MarketoFormEmailField extends MarketoBaseFormField {
-	dataType: 'email'
-	hintText?: string
-	formPrefill: boolean
-}
-
-export interface MarketoFormTelephoneField extends MarketoBaseFormField {
-	dataType: 'telephone'
-	hintText?: string
-	formPrefill: boolean
-}
-
-export interface MarketoFormTextAreaField extends MarketoBaseFormField {
-	dataType: 'textArea'
-	hintText?: string
-	formPrefill: boolean
-}
-
-export interface SelectValue {
-	label: string
-	value: string
-	selected?: boolean
-	isDefault?: boolean
-}
-
-export interface SelectFieldMetaData {
-	values?: SelectValue[]
-	visibleLines?: number
-	multiSelect?: boolean
-}
-
-export interface MarketoFormSelectField extends MarketoBaseFormField {
-	dataType: 'select'
-	fieldMetaData: SelectFieldMetaData
-	formPrefill: boolean
-	labelWidth?: number
-}
-
-export interface CheckboxFieldMetaData {
-	initiallyChecked: boolean
-}
-
-export interface MarketoFormCheckboxField extends MarketoBaseFormField {
-	dataType: 'checkbox'
-	fieldMetaData: CheckboxFieldMetaData
-	formPrefill: boolean
-}
-
-export interface MarketoFormHiddenField extends MarketoBaseFormField {
-	dataType: 'hidden'
-}
-
-export interface MarketoFormHtmltextField extends MarketoBaseFormField {
-	dataType: 'htmltext'
-	labelWidth: number
-	visibilityRules?: VisibilityRules
-	text: string
-}
-
-export interface MarketoFormRadioButtonsField extends MarketoBaseFormField {
-	dataType: 'radioButtons'
-	fieldWidth?: number
-	formPrefill?: boolean
-	fieldMetaData: {
-		values: Array<{ label: string; value: string }>
-	}
-}
-
-export interface MarketoFormFieldset extends MarketoBaseFormField {
-	dataType: 'fieldset'
-	visibilityRules?: VisibilityRules
-	fields: Array<string>
-}
-
-export type MarketoFormField =
-	| MarketoFormTextField
-	| MarketoFormEmailField
-	| MarketoFormTelephoneField
-	| MarketoFormTextAreaField
-	| MarketoFormSelectField
-	| MarketoFormCheckboxField
-	| MarketoFormHiddenField
-	| MarketoFormHtmltextField
-	| MarketoFormRadioButtonsField
-	| MarketoFormFieldset
-
-export interface MarketoFormMetadata {
-	id: number
-	name: string
-	description: string
-	createdAt: string
-	updatedAt: string
-	url: string
-	status: string
-	theme: string
-	language: string
-	locale: string
-	progressiveProfiling: boolean
-	labelPosition: string
-	fontFamily: string
-	fontSize: string
-	folder?: {
-		type: string
-		value: number
-		folderName: string
-	}
-	knownVisitor?: {
-		type: string
-		template: unknown
-	}
-	thankYouList?: {
-		followupType: string
-		followupValue: string | null
-		default: boolean
-	}[]
-	buttonLocation: number
-	buttonLabel: string
-	waitingLabel: string
-	workSpaceId: number
-}
-
-/**
- * The Marketo API response containing form fields.
- */
-export interface MarketoFormResponse<T> {
-	success: boolean
-	errors: { code: string; message: string }[]
-	warnings?: string[]
-	requestId?: string
-	result: T[]
-}
-
-export type MarketoFormFieldsResponse = MarketoFormResponse<MarketoFormField>
-export type MarketoFormMetadataResponse =
-	MarketoFormResponse<MarketoFormMetadata>
-export interface MarketoFormAPIResponse {
-	fields: MarketoFormFieldsResponse
-	metadata: MarketoFormMetadataResponse
-}
-
-/**
- * Custom components to be used in lieu of the default built-in components.
- */
-export interface MarketoFormComponents {
-	text?: (props: { field: MarketoFormTextField }) => JSX.Element
-	email?: (props: { field: MarketoFormEmailField }) => JSX.Element
-	telephone?: (props: { field: MarketoFormTelephoneField }) => JSX.Element
-	textArea?: (props: { field: MarketoFormTextAreaField }) => JSX.Element
-	select?: (props: { field: MarketoFormSelectField }) => JSX.Element
-	checkbox?: (props: { field: MarketoFormCheckboxField }) => JSX.Element
-	hidden?: (props: { field: MarketoFormHiddenField }) => JSX.Element
-	htmltext?: (props: { field: MarketoFormHtmltextField }) => JSX.Element
-	radioButtons?: (props: { field: MarketoFormRadioButtonsField }) => JSX.Element
-}
-
-/**
- * Configuration on which fields to render with a single component. Can be used
- * to render multiple default components on one row (such as First Name and
- * Last Name) or to render a particular set of fields with a single component.
- */
-export type MarketoFormGroups = Record<
-	string,
-	{
-		fields: string[]
-		component: (props: { fields: MarketoFormField[] }) => JSX.Element
-	}
->
-
-export type SubmissionFilter = (req: NextApiRequest) => Promise<boolean>
-
-export interface MarketoSubmissionResponse {
-	success: boolean
-	result: { status: 'created' | 'updated' | 'skipped' }[]
-}
-
-export type OnSubmitData = Record<string, unknown>
-
-export interface OnSubmitProps {
-	/**
-	 * Whether to reset the form after a successful submission.
-	 * Default: false
-	 */
-	resetOnSubmission?: boolean
-
-	/**
-	 * Callback called when form has started submission process.
-	 * Form will submit with the transformed data returned.
-	 */
-	transformData?: (data: OnSubmitData) => OnSubmitData
-
-	/**
-	 * Callback called when form has started submission process.
-	 */
-	onSubmitStart?: () => void
-
-	/**
-	 * Callback called when form has been successfully submitted.
-	 */
-	onSubmitSuccess?: (data?: OnSubmitData) => void
-
-	/**
-	 * Callback called when form submission results in an error.
-	 */
-	onSubmitError?: () => void
-}