ON-33232 # Fixed freshdesk dependant field options never loading

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)

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(

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]