From 7bd634f4429967d151faebaefab03210beba1bce Mon Sep 17 00:00:00 2001
From: Matt Carroll <matt.carroll139@gmail.com>
Date: Fri, 14 Jul 2023 12:03:35 +1000
Subject: [PATCH] ON-33232 # Fixed freshdesk dependant field options never
 loading

---
 .../FormElementFreshdeskDependentField.tsx    | 47 ++++++++++++++++++-
 src/hooks/useDynamicOptionsLoaderState.tsx    | 21 ++++++++-
 ...generateFreshdeskDependentFieldElements.ts |  2 +
 3 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/form-elements/FormElementFreshdeskDependentField.tsx b/src/form-elements/FormElementFreshdeskDependentField.tsx
index 8bab5849..197e97e6 100644
--- a/src/form-elements/FormElementFreshdeskDependentField.tsx
+++ b/src/form-elements/FormElementFreshdeskDependentField.tsx
@@ -4,9 +4,12 @@ import FormElementForm, { Props } from './FormElementForm'
 import generateFreshdeskDependentFieldElements, {
   getNestedOptions,
 } from '../services/generateFreshdeskDependentFieldElements'
+import { UpdateFormElementsHandler } from '../typedoc'
+import { typeCastService } from '@oneblink/sdk-core'
 
 function FormElementFreshdeskDependentField({
   element,
+  onUpdateFormElements,
   ...props
 }: Omit<Props, 'element'> & {
   element: FormTypes.FreshdeskDependentFieldElement
@@ -16,7 +19,7 @@ function FormElementFreshdeskDependentField({
     [element],
   )
 
-  const formElement = React.useMemo<FormTypes.FormFormElement>(() => {
+  const formFormElement = React.useMemo<FormTypes.FormFormElement>(() => {
     const [categoryElement, subcategoryElement, itemElement] = freshdeskElements
     const elements = [categoryElement]
     const value = props.value as
@@ -49,7 +52,47 @@ function FormElementFreshdeskDependentField({
     }
   }, [element, props.value, freshdeskElements])
 
-  return <FormElementForm element={formElement} {...props} />
+  const handleUpdateNestedFormElements =
+    React.useCallback<UpdateFormElementsHandler>(
+      (setter) => {
+        const [newFormFormElement] = setter([formFormElement])
+        if (
+          newFormFormElement.type !== 'form' ||
+          !Array.isArray(newFormFormElement.elements) ||
+          !newFormFormElement.elements[0]
+        ) {
+          return
+        }
+        const categoryElementWithOptions =
+          typeCastService.formElements.toOptionsElement(
+            newFormFormElement.elements[0],
+          )
+        if (!categoryElementWithOptions?.options) {
+          return
+        }
+
+        onUpdateFormElements((formElements) => {
+          return formElements.map((formElement) => {
+            if (formElement.id === element.id) {
+              return {
+                ...formElement,
+                options: categoryElementWithOptions.options,
+              }
+            }
+            return formElement
+          })
+        })
+      },
+      [element.id, formFormElement, onUpdateFormElements],
+    )
+
+  return (
+    <FormElementForm
+      element={formFormElement}
+      onUpdateFormElements={handleUpdateNestedFormElements}
+      {...props}
+    />
+  )
 }
 
 export default React.memo(FormElementFreshdeskDependentField)
diff --git a/src/hooks/useDynamicOptionsLoaderState.tsx b/src/hooks/useDynamicOptionsLoaderState.tsx
index a061d55a..eaa1c811 100644
--- a/src/hooks/useDynamicOptionsLoaderState.tsx
+++ b/src/hooks/useDynamicOptionsLoaderState.tsx
@@ -56,8 +56,25 @@ export function FormElementOptionsContextProvider({
 
   const [freshdeskFieldsState] = useLoadDataState(loadFreshdeskFields)
 
+  const hasOptionsSets = React.useMemo<boolean>(() => {
+    return !!formElementsService.findFormElement(
+      form.elements,
+      (formElement) => {
+        const formElementWithOptions =
+          typeCastService.formElements.toOptionsElement(formElement)
+        return (
+          formElementWithOptions?.optionsType === 'DYNAMIC' &&
+          !!formElementWithOptions.dynamicOptionSetId
+        )
+      },
+    )
+  }, [form.elements])
+
   const loadFormElementOptionsSets = React.useCallback(
-    async (abortSignal) => {
+    async (abortSignal): Promise<OptionsSetResult[]> => {
+      if (!hasOptionsSets) {
+        return []
+      }
       const formElementOptionsSets =
         await formService.getFormElementOptionsSets(
           form.organisationId,
@@ -69,7 +86,7 @@ export function FormElementOptionsContextProvider({
         }),
       )
     },
-    [form.organisationId],
+    [form.organisationId, hasOptionsSets],
   )
 
   const [optionsSetResultsState, , setOptionsSetResults] = useLoadDataState(
diff --git a/src/services/generateFreshdeskDependentFieldElements.ts b/src/services/generateFreshdeskDependentFieldElements.ts
index f18623cd..d50ae6af 100644
--- a/src/services/generateFreshdeskDependentFieldElements.ts
+++ b/src/services/generateFreshdeskDependentFieldElements.ts
@@ -48,6 +48,8 @@ export default function generateFreshdeskDependentFieldElements(
     hint: element.hint,
     defaultValue: element.defaultValue?.category,
     options: element.options,
+    freshdeskFieldName: element.freshdeskFieldName,
+    optionsType: 'FRESHDESK_FIELD',
   }
   const formElements = [categoryElement]