feat: add support for htmltext (#928)

.changeset/orange-meals-mate.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-marketo-form': minor
+---
+
+Add support for htmltext fields

packages/marketo-form/docs.mdx

@@ -158,11 +158,12 @@ Renders a form from Marketo.
         },
         {
           id: "Consent_Privacy_Policy__c",
+          label: "Send me news about HashiCorp products, releases and events.",
           dataType: "checkbox",
           validationMessage: "This field is required.",
           rowNumber: 6,
           columnNumber: 0,
-          required: true,
+          required: false,
           formPrefill: true,
           fieldMetaData: {
             initiallyChecked: false,
@@ -171,6 +172,17 @@ Renders a form from Marketo.
             ruleType: "alwaysShow",
           },
         },
+        {
+          id: "SHRtbFRleHRfMjAyMy0wNC0wNVQyMjo0NDo0Ny45OTZa",
+          labelWidth: 260,
+          dataType: "htmltext",
+          rowNumber: 9,
+          columnNumber: 0,
+          visibilityRules: {
+            ruleType: "alwaysShow"
+          },
+          text: "By submitting this form, you acknowledge and agree that HashiCorp will process your personal information in accordance with the <a href=\\"https://hashicorp.com/privacy\\" target=\\"_blank\\" id=\\"\\">Privacy Policy</a>."
+        }
       ],
     }}
     submitTitle="Download Now"

packages/marketo-form/form/index.tsx

@@ -155,7 +155,7 @@ const Form = ({
       let errors: Record<string, { message: string }> = {}
 
       fields.result.forEach((field) => {
-        if (field.required) {
+        if ('required' in field && field.required) {
           if (
             !(field.id in values) ||
             values[field.id] === '' ||

packages/marketo-form/partials/field/index.tsx

@@ -9,8 +9,8 @@ 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 PrivacyPolicyField from '../fields/privacy-policy-field'
 import HiddenField from '../fields/hidden-field'
+import HtmltextField from '../fields/htmltext-field'
 import FormPageUrlField from '../fields/form-page-url-field'
 import type { MarketoFormField, MarketoFormComponents } from '../../types'
 
@@ -57,9 +57,6 @@ const Field = ({
         const Component = components.checkbox!
         return <Component field={field} />
       }
-      if (field.id === 'Consent_Privacy_Policy__c') {
-        return <PrivacyPolicyField field={field} />
-      }
       return <CheckboxField field={field} />
     case 'hidden':
       if (components && 'hidden' in components) {
@@ -70,6 +67,12 @@ const Field = ({
         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} />
     default:
       console.error(`Unknown form field type: ${(field as any).Datatype}`)
   }

packages/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

packages/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);
+}

packages/marketo-form/partials/visibility-rule/index.tsx

@@ -6,7 +6,28 @@
 import { useMemo } from 'react'
 import { useFormContext } from 'react-hook-form'
 import Field from '../field'
-import type { MarketoFormField, MarketoFormComponents } from '../../types'
+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,
@@ -20,17 +41,26 @@ const FieldWithVisibilityRule = ({
   // Currently we only support the first defined rule.
   const value = watch(field.visibilityRules!.rules![0].subjectField)
 
-  const show = useMemo(() => {
-    const { operator, values } = field.visibilityRules!.rules![0]
-    return (
-      operator === 'is' &&
-      (values.includes(value) ||
-        (value === false && values.includes('no')) ||
-        (value === true && values.includes('yes')))
+  const hasMatchingRule = useMemo(() => {
+    return field.visibilityRules!.rules!.some((rule) =>
+      ruleApplies(rule, value)
     )
   }, [field, value])
 
-  return show ? <Field field={field} components={components} /> : null
+  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 = ({
@@ -40,7 +70,11 @@ const VisibilityRule = ({
   field: MarketoFormField
   components?: MarketoFormComponents
 }) => {
-  if (field.visibilityRules && field.visibilityRules.ruleType === 'show') {
+  if (
+    field.visibilityRules &&
+    (field.visibilityRules.ruleType === 'show' ||
+      field.visibilityRules.ruleType === 'hide')
+  ) {
     return <FieldWithVisibilityRule field={field} components={components} />
   }
 

packages/marketo-form/server/client.ts

@@ -57,6 +57,37 @@ export async function getForm(formId: number) {
   return { fields, metadata }
 }
 
+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> {