feat: add validation to the form

zendesk · Nov 22, 2024 · 2df4d53 · 2df4d53
1 parent fefec33
commit 2df4d53
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 60 deletions.
diff --git a/assets/service-catalog-bundle.js b/assets/service-catalog-bundle.js
diff --git a/src/modules/service-catalog/ServiceCatalogItemPage.tsx b/src/modules/service-catalog/ServiceCatalogItemPage.tsx
@@ -4,6 +4,7 @@ import { ItemRequestForm } from "./components/service-catalog-item/ItemRequestFo
 import type { Organization } from "../ticket-fields";
 import { useServiceCatalogItem } from "./useServiceCatalogItem";
 import { useServiceFormSubmit } from "./useServiceFormSubmit";
+import type { RequestError } from "./data-types/RequestError";
 
 const Container = styled.div`
   display: flex;
@@ -37,21 +38,41 @@ export function ServiceCatalogItemPage({
   brandId,
 }: ServiceCatalogItemPageProps) {
   const serviceCatalogItem = useServiceCatalogItem(serviceCatalogItemId);
-  const { requestFields, handleChange } = useItemFormFields(
-    serviceCatalogItem,
-    baseLocale
-  );
+  const {
+    requestFields,
+    associatedLookupField,
+    setRequestFields,
+    handleChange,
+  } = useItemFormFields(serviceCatalogItem, baseLocale);
   const { submitServiceItemRequest } = useServiceFormSubmit(
     serviceCatalogItem,
-    requestFields
+    requestFields,
+    associatedLookupField,
+    baseLocale
   );
 
   const handleRequestSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    try {
-      await submitServiceItemRequest();
-    } catch (error) {
-      console.error("Error submitting service item request:", error);
+
+    const response = await submitServiceItemRequest();
+    if (response && !response.ok) {
+      const errorData = await response.json();
+      if (errorData.error === "RecordInvalid") {
+        const invalidFieldErros = errorData.details.base;
+        const updatedFields = requestFields.map((field) => {
+          const errorField = invalidFieldErros.find(
+            (errorField: RequestError) => errorField.field_key === field.id
+          );
+          return errorField
+            ? { ...field, error: errorField.description }
+            : field;
+        });
+        setRequestFields(updatedFields);
+      }
+    } else if (response && response.ok) {
+      const data = await response?.json();
+      const redirectUrl = "/hc/requests/" + data.request.id;
+      window.location.href = redirectUrl;
     }
   };
 

diff --git a/src/modules/service-catalog/components/service-catalog-item/ItemRequestForm.tsx b/src/modules/service-catalog/components/service-catalog-item/ItemRequestForm.tsx
@@ -110,7 +110,7 @@ export function ItemRequestForm({
 }: ItemRequestFormProps) {
   const { t } = useTranslation();
   return (
-    <Form onSubmit={onSubmit}>
+    <Form onSubmit={onSubmit} noValidate>
       <LeftColumn>
         <CollapsibleDescription
           title={serviceCatalogItem.name}

diff --git a/src/modules/service-catalog/components/useItemFormFields.tsx b/src/modules/service-catalog/components/useItemFormFields.tsx
@@ -27,16 +27,23 @@ const formatField = (field: TicketField): Field => {
   };
 };
 
-const isAssociatedLookupField = (field: TicketField) => {
+const isAssociatedLookupField = (
+  field: TicketField,
+  setAssociatedLookupField: (field: Field | null) => void
+) => {
   const customObjectKey = getCustomObjectKey(
     field.relationship_target_type as string
   );
-  return customObjectKey === "service_catalog_item";
+  if (customObjectKey === "service_catalog_item") {
+    setAssociatedLookupField(formatField(field));
+    return true;
+  } else return false;
 };
 
 const fetchTicketFields = async (
   form_id: string,
-  baseLocale: string
+  baseLocale: string,
+  setAssociatedLookupField: (field: Field | null) => void
 ): Promise<Field[]> => {
   try {
     const [formResponse, fieldsResponse] = await Promise.all([
@@ -66,7 +73,7 @@ const fetchTicketFields = async (
           ticketField &&
           !(
             ticketField.type === "lookup" &&
-            isAssociatedLookupField(ticketField)
+            isAssociatedLookupField(ticketField, setAssociatedLookupField)
           ) &&
           ticketField.editable_in_portal
         ) {
@@ -87,14 +94,18 @@ export function useItemFormFields(
   baseLocale: string
 ) {
   const [requestFields, setRequestFields] = useState<Field[]>([]);
+  const [associatedLookupField, setAssociatedLookupField] =
+    useState<Field | null>();
 
   useEffect(() => {
     const fetchAndSetFields = async () => {
       if (serviceCatalogItem && serviceCatalogItem.form_id) {
         try {
-          await fetchTicketFields(serviceCatalogItem.form_id, baseLocale).then(
-            (ticketFields) => setRequestFields(ticketFields)
-          );
+          await fetchTicketFields(
+            serviceCatalogItem.form_id,
+            baseLocale,
+            setAssociatedLookupField
+          ).then((ticketFields) => setRequestFields(ticketFields));
         } catch (error) {
           console.error("Error fetching ticket fields:", error);
         }
@@ -117,5 +128,10 @@ export function useItemFormFields(
     [requestFields]
   );
 
-  return { requestFields, handleChange };
+  return {
+    requestFields,
+    associatedLookupField,
+    setRequestFields,
+    handleChange,
+  };
 }
diff --git a/src/modules/service-catalog/data-types/RequestError.ts b/src/modules/service-catalog/data-types/RequestError.ts
@@ -0,0 +1,5 @@
+export interface RequestError {
+  description: string;
+  error: string;
+  field_key: number;
+}
diff --git a/src/modules/service-catalog/data-types/TicketField.ts b/src/modules/service-catalog/data-types/TicketField.ts
@@ -5,6 +5,7 @@ export interface TicketField {
   title: string;
   value?: string | string[] | boolean;
   required: boolean;
+  error: string | null;
   description: string;
   type: string;
   custom_field_options: FieldOption[];

diff --git a/src/modules/service-catalog/useServiceFormSubmit.tsx b/src/modules/service-catalog/useServiceFormSubmit.tsx
@@ -3,15 +3,24 @@ import type { ServiceCatalogItem } from "./data-types/ServiceCatalogItem";
 
 export function useServiceFormSubmit(
   serviceCatalogItem: ServiceCatalogItem | undefined,
-  requestFields: Field[]
+  requestFields: Field[],
+  associatedLookupField: Field | null | undefined,
+  baseLocale: string
 ) {
   const submitServiceItemRequest = async () => {
     if (!serviceCatalogItem) {
       return;
     }
-    console.log("requestFields", requestFields);
     const currentUserRequest = await fetch("/api/v2/users/me.json");
     const currentUser = await currentUserRequest.json();
+    const customFields = requestFields.map((field) => {
+      if (field.type !== "subject" && field.type !== "description") {
+        return {
+          id: field.id,
+          value: field.value,
+        };
+      } else return;
+    });
     const response = await fetch("/api/v2/requests", {
       method: "POST",
       headers: {
@@ -25,20 +34,19 @@ export function useServiceFormSubmit(
             body: serviceCatalogItem.description,
           },
           ticket_form_id: serviceCatalogItem.form_id,
-          custom_fields: requestFields.map((field) => {
-            if (field.type !== "subject" && field.type !== "description") {
-              return {
-                id: field.id,
-                value: field.value,
-              };
-            } else return;
-          }),
+          custom_fields: [
+            ...customFields,
+            { id: associatedLookupField?.id, value: serviceCatalogItem.id },
+          ],
+          via: {
+            channel: "web form",
+            source: 50,
+          },
+          locale: baseLocale,
         },
       }),
     });
-    const data = await response.json();
-    const redirectUrl = "/hc/requests/" + data.request.id;
-    window.location.href = redirectUrl;
+    return response;
   };
 
   return { submitServiceItemRequest };