feat: add parent id hidden input field

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

@@ -3,6 +3,7 @@ import { TextInput } from "./fields/TextInput";
 import { TextArea } from "./fields/TextArea";
 import { DropDown } from "./fields/DropDown";
 import { TicketFormField } from "./ticket-form-field/TicketFormField";
+import { ParentTicketField } from "./parent-ticket-field/ParentTicketField";
 import { Button } from "@zendeskgarden/react-buttons";
 import styled from "styled-components";
 import { Alert } from "@zendeskgarden/react-notifications";
@@ -11,6 +12,7 @@ import { useSubmitHandler } from "./useSubmitHandler";
 export interface NewRequestFormProps {
   ticketForms: TicketForm[];
   requestForm: RequestForm;
+  parentId: string;
 }
 
 const Form = styled.form`
@@ -26,6 +28,7 @@ const Footer = styled.div`
 export function NewRequestForm({
   ticketForms,
   requestForm,
+  parentId
 }: NewRequestFormProps) {
   const {
     fields,
@@ -35,6 +38,7 @@ export function NewRequestForm({
     errors,
     ticket_form_field,
     ticket_forms_instructions,
+    parent_id_field,
   } = requestForm;
   const handleSubmit = useSubmitHandler();
 
@@ -47,6 +51,9 @@ export function NewRequestForm({
       onSubmit={handleSubmit}
     >
       {errors && <Alert type="error">{errors}</Alert>}
+      {parentId && (
+        <ParentTicketField field={parent_id_field} />
+      )}
       {ticketForms.length > 0 && (
         <TicketFormField
           label={ticket_forms_instructions}

src/modules/new-request-form/data-types/RequestForm.tsx

@@ -7,5 +7,6 @@ export interface RequestForm {
   errors: string | null;
   ticket_forms_instructions: string;
   ticket_form_field: Field;
+  parent_id_field: Field;
   fields: Field[];
 }

src/modules/new-request-form/parent-ticket-field/ParentTicketField.tsx

@@ -0,0 +1,16 @@
+import type { Field } from "../data-types";
+
+interface ParentTicketFieldProps {
+  field: Field;
+}
+
+export function ParentTicketField({ field }: ParentTicketFieldProps): JSX.Element {
+  const { value, name } = field;
+  return (
+    <input
+      type="hidden"
+      name={name}
+      value={value}
+    />
+  );
+}

templates/new_request_page.hbs

@@ -30,7 +30,9 @@
     {{id}}, url: "{{url}}", display_name: "{{display_name}}" });
   {{/each}}
 
+  const parentId = "{{ parent_id }}";
+
   const container = document.getElementById("new-request-form");
-  const props = { ticketForms, requestForm };
+  const props = { ticketForms, requestForm, parentId };
   renderNewRequestForm(props, container);
 </script>