Merge pull request #524 from zendesk/lookup-fields

Lookup fields implementation

package.json

@@ -35,6 +35,7 @@
     "dompurify": "3.0.11",
     "eslint-plugin-check-file": "^2.6.2",
     "i18next": "^23.10.1",
+    "lodash.debounce": "^4.0.8",
     "mime": "^4.0.4",
     "node-fetch": "2.6.9",
     "react": "^17.0.2",
@@ -63,6 +64,7 @@
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",

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

@@ -1,5 +1,5 @@
 import type { AnswerBot, Field, RequestForm } from "./data-types";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Input } from "./fields/Input";
 import { TextArea } from "./fields/textarea/TextArea";
 import { DropDown } from "./fields/DropDown";
@@ -22,6 +22,8 @@ import { SuggestedArticles } from "./suggested-articles/SuggestedArticles";
 import { AnswerBotModal } from "./answer-bot-modal/AnswerBotModal";
 import { useTranslation } from "react-i18next";
 import { Paragraph } from "@zendeskgarden/react-typography";
+import { LookupField } from "./fields/LookupField";
+import type { Organization } from "./data-types/Organization";
 
 export interface NewRequestFormProps {
   requestForm: RequestForm;
@@ -33,7 +35,9 @@ export interface NewRequestFormProps {
   baseLocale: string;
   hasAtMentions: boolean;
   userRole: string;
+  userId: number;
   brandId: number;
+  organizations: Array<Organization>;
   answerBotModal: {
     answerBot: AnswerBot;
     hasRequestManagement: boolean;
@@ -68,7 +72,9 @@ export function NewRequestForm({
   baseLocale,
   hasAtMentions,
   userRole,
+  userId,
   brandId,
+  organizations,
   answerBotModal,
 }: NewRequestFormProps) {
   const {
@@ -102,7 +108,6 @@ export function NewRequestForm({
     organizationField: organization_field,
     dueDateField: due_date_field,
   });
-
   const [ticketFields, setTicketFields] = useState(prefilledTicketFields);
   const [organizationField, setOrganizationField] = useState(
     prefilledOrganizationField
@@ -111,16 +116,22 @@ export function NewRequestForm({
   const visibleFields = getVisibleFields(ticketFields, end_user_conditions);
   const { formRefCallback, handleSubmit } = useFormSubmit(ticketFields);
   const { t } = useTranslation();
-
-  function handleChange(field: Field, value: Field["value"]) {
-    setTicketFields(
-      ticketFields.map((ticketField) =>
-        ticketField.name === field.name
-          ? { ...ticketField, value }
-          : ticketField
-      )
-    );
-  }
+  const defaultOrganizationId =
+    organizations.length > 0 && organizations[0]?.id
+      ? organizations[0]?.id?.toString()
+      : null;
+  const handleChange = useCallback(
+    (field: Field, value: Field["value"]) => {
+      setTicketFields(
+        ticketFields.map((ticketField) =>
+          ticketField.name === field.name
+            ? { ...ticketField, value }
+            : ticketField
+        )
+      );
+    },
+    [ticketFields]
+  );
 
   function handleOrganizationChange(value: string) {
     if (organizationField === null) {
@@ -301,6 +312,20 @@ export function NewRequestForm({
                   onChange={(value) => handleChange(field, value)}
                 />
               );
+            case "lookup":
+              return (
+                <LookupField
+                  key={field.name}
+                  field={field}
+                  userId={userId}
+                  organizationId={
+                    organizationField !== null
+                      ? (organizationField.value as string)
+                      : defaultOrganizationId
+                  }
+                  onChange={(value) => handleChange(field, value)}
+                />
+              );
             default:
               return <></>;
           }

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

@@ -8,6 +8,7 @@ export interface Field {
   description: string;
   type: string;
   options: FieldOption[];
+  relationship_target_type?: string;
 }
 
 export interface FieldOption {

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

@@ -0,0 +1,4 @@
+export interface Organization {
+  id: number;
+  name: string;
+}