@hashicorp/react-components 0.0.0 → 1.0.0

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

@@ -0,0 +1,268 @@
+/**
+ * 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'
+
+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
+}
+
+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 {
+	id: string
+	labelWidth: number
+	dataType: 'htmltext'
+	rowNumber: number
+	columnNumber: 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 {
+	id: string
+	label?: string
+	dataType: 'fieldset'
+	rowNumber: number
+	columnNumber: number
+	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
+}

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

@@ -0,0 +1,103 @@
+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)
+	})
+})