Rendering DropDown and TextArea ticket fields

rollup.config.mjs

@@ -3,7 +3,7 @@ import { nodeResolve } from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
 import replace from "@rollup/plugin-replace";
-import { generateImportMap } from "./generate-import-map.mjs"
+import { generateImportMap } from "./generate-import-map.mjs";
 import { defineConfig } from "rollup";
 
 export default defineConfig([
@@ -19,6 +19,7 @@ export default defineConfig([
     },
   },
   {
+    context: "this",
     input: {
       "new-request-form": "src/modules/new-request-form/index.tsx",
       shared: "src/modules/shared.tsx",

src/modules/new-request-form/NewRequestForm.tsx

@@ -1,5 +1,7 @@
 import type { Field, TicketForm } from "./data-types";
 import { TextInput } from "./fields/TextInput";
+import { TextArea } from "./fields/TextArea";
+import { DropDown } from "./fields/DropDown";
 import { TicketFormField } from "./ticket-form-field/TicketFormField";
 
 export interface NewRequestFormProps {
@@ -13,8 +15,14 @@ export function NewRequestForm({ ticketForms, fields }: NewRequestFormProps) {
       <TicketFormField ticketForms={ticketForms} />
       {fields.map((field) => {
         switch (field.type) {
+          case "anonymous_requester_email":
           case "subject":
             return <TextInput field={field} />;
+          case "description":
+          case "textarea":
+            return <TextArea field={field} />;
+          case "priority":
+            return <DropDown field={field} />;
           default:
             return <></>;
         }

src/modules/new-request-form/data-types/Field.ts

@@ -7,4 +7,10 @@ export interface Field {
   description: string;
   type: string;
   id: string;
+  options: Option[];
+}
+
+interface Option {
+  name: string;
+  value: string;
 }

src/modules/new-request-form/fields/DropDown.tsx

@@ -0,0 +1,39 @@
+import {
+  Field as GardenField,
+  Label,
+  Hint,
+  Combobox,
+  Option,
+  Message,
+} from "@zendeskgarden/react-dropdowns.next";
+import type { Field } from "../data-types";
+
+interface DropDownProps {
+  field: Field;
+}
+
+export function DropDown({ field }: DropDownProps): JSX.Element {
+  const { label, options, error, value, name, required, description } = field;
+  return (
+    <GardenField>
+      <Label>{label}</Label>
+      {description && <Hint>{description}</Hint>}
+      <Combobox
+        inputProps={{ name, required }}
+        isEditable={false}
+        validation={error ? "error" : undefined}
+      >
+        {options.map((option) => (
+          <Option
+            key={option.value}
+            value={option.value}
+            isSelected={option.value === value}
+          >
+            {option.name}
+          </Option>
+        ))}
+      </Combobox>
+      {error && <Message validation="error">{error}</Message>}
+    </GardenField>
+  );
+}

src/modules/new-request-form/fields/TextArea.tsx

@@ -0,0 +1,29 @@
+import {
+  Field as GardenField,
+  Hint,
+  Textarea,
+  Label,
+  Message,
+} from "@zendeskgarden/react-forms";
+import type { Field } from "../data-types";
+
+interface TextAreaProps {
+  field: Field;
+}
+
+export function TextArea({ field }: TextAreaProps): JSX.Element {
+  const { label, error, value, name, required, description } = field;
+  return (
+    <GardenField>
+      <Label>{label}</Label>
+      {description && <Hint>{description}</Hint>}
+      <Textarea
+        name={name}
+        value={value}
+        validation={error ? "error" : undefined}
+        required={required}
+      />
+      {error && <Message validation="error">{error}</Message>}
+    </GardenField>
+  );
+}

templates/new_request_page.hbs

@@ -55,7 +55,19 @@
 
   {{#with new_request_form}}
   {{#each fields}}
-    fields.push({ name: "{{name}}", value: "{{value}}", error: "{{error}}", label: {{ json_stringify label }}, required: {{required}}, description: "{{description}}", type: "{{type}}", id: "{{id}}" })
+    fields.push({
+      name: "{{name}}",
+      value: "{{value}}",
+      error: "{{error}}",
+      label: {{ json_stringify label }},
+      required: {{required}},
+      description: "{{description}}",
+      type: "{{type}}",
+      id: "{{id}}",
+      options: [{{#each options}}
+        { name: "{{name}}", value: "{{value}}" },
+      {{/each}}],
+    })
   {{/each}}
   {{/with}}