({
displayValidationMessages={displayValidationMessage}
onLookup={handleLookup}
elements={element.elements}
+ onUpdateFormElements={handleUpdateNestedFormElements}
/>
diff --git a/src/form-elements/FormElementSelect.tsx b/src/form-elements/FormElementSelect.tsx
index 14131607..09bf6443 100644
--- a/src/form-elements/FormElementSelect.tsx
+++ b/src/form-elements/FormElementSelect.tsx
@@ -10,6 +10,7 @@ import {
FormElementValueChangeHandler,
FormElementConditionallyShownElement,
IsDirtyProps,
+ UpdateFormElementsHandler,
} from '../types/form'
type Props = {
@@ -22,6 +23,7 @@ type Props = {
conditionallyShownOptionsElement:
| FormElementConditionallyShownElement
| undefined
+ onUpdateFormElements: UpdateFormElementsHandler
} & IsDirtyProps
function FormElementSelect({
@@ -32,6 +34,7 @@ function FormElementSelect({
validationMessage,
displayValidationMessage,
conditionallyShownOptionsElement,
+ onUpdateFormElements,
isDirty,
setIsDirty,
}: Props) {
@@ -40,6 +43,7 @@ function FormElementSelect({
value,
onChange,
conditionallyShownOptionsElement,
+ onUpdateFormElements,
})
const selectedValuesAsArray = React.useMemo(() => {
diff --git a/src/hooks/useDynamicOptionsLoaderState.ts b/src/hooks/useDynamicOptionsLoaderState.ts
deleted file mode 100644
index fadb5c75..00000000
--- a/src/hooks/useDynamicOptionsLoaderState.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react'
-import _cloneDeep from 'lodash.clonedeep'
-import { formElementsService } from '@oneblink/sdk-core'
-import { formService, OneBlinkAppsError } from '@oneblink/apps'
-import { FormTypes } from '@oneblink/types'
-import { SetFormSubmission } from '../types/form'
-
-export default function useDynamicOptionsLoaderState(
- form: FormTypes.Form,
- setFormSubmission: SetFormSubmission,
-) {
- const [state, setState] = React.useState<{
- elementId: string
- error: OneBlinkAppsError
- } | null>(null)
- React.useEffect(() => {
- if (state) {
- return
- }
-
- const abortController = new AbortController()
-
- ;(async () => {
- const optionsByElementId = await formService.getFormElementDynamicOptions(
- form,
- )
-
- if (abortController.signal.aborted || !optionsByElementId.length) {
- return
- }
-
- const nonOkResponse = optionsByElementId.find(
- (optionsForElementId) => optionsForElementId.type === 'ERROR',
- )
- if (nonOkResponse && nonOkResponse.type === 'ERROR') {
- setState({
- elementId: nonOkResponse.elementId,
- error: nonOkResponse.error,
- })
- return
- }
-
- setFormSubmission((currentFormSubmission) => {
- const clonedForm: FormTypes.Form = _cloneDeep(
- currentFormSubmission.definition,
- )
- for (const optionsForElementId of optionsByElementId) {
- formElementsService.forEachFormElementWithOptions(
- clonedForm.elements,
- (formElement) => {
- if (formElement.id === optionsForElementId.elementId) {
- switch (optionsForElementId.type) {
- case 'OPTIONS': {
- formElement.options = optionsForElementId.options
- break
- }
- case 'SEARCH': {
- if (formElement.type === 'autocomplete') {
- formElement.optionsType = 'SEARCH'
- formElement.searchUrl = optionsForElementId.url
- formElement.searchQuerystringParameter =
- optionsForElementId.searchQuerystringParameter
- }
- break
- }
- }
- }
- },
- )
- }
- return {
- ...currentFormSubmission,
- definition: clonedForm,
- }
- })
- })()
-
- return () => {
- abortController.abort()
- }
- }, [form, setFormSubmission, state])
-
- return state
-}
diff --git a/src/hooks/useDynamicOptionsLoaderState.tsx b/src/hooks/useDynamicOptionsLoaderState.tsx
new file mode 100644
index 00000000..a061d55a
--- /dev/null
+++ b/src/hooks/useDynamicOptionsLoaderState.tsx
@@ -0,0 +1,333 @@
+import * as React from 'react'
+import { formElementsService, typeCastService } from '@oneblink/sdk-core'
+import {
+ formService,
+ localisationService,
+ OneBlinkAppsError,
+} from '@oneblink/apps'
+import { FormTypes, FreshdeskTypes } from '@oneblink/types'
+import useLoadDataState, { LoadDataState } from './useLoadDataState'
+import OneBlinkAppsErrorOriginalMessage from '../components/renderer/OneBlinkAppsErrorOriginalMessage'
+import useFormDefinition from './useFormDefinition'
+import { UpdateFormElementsHandler } from '../typedoc'
+
+type OptionsSetResult = {
+ formElementOptionsSet: FormTypes.FormElementOptionSet
+ result?: formService.FormElementOptionsSetResult
+}
+
+export const FormElementOptionsContext = React.createContext<
+ OptionsSetResult[]
+>([])
+export const FreshdeskFieldsStateContext = React.createContext<
+ LoadDataState
| undefined
+>(undefined)
+
+export function FormElementOptionsContextProvider({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ const form = useFormDefinition()
+
+ const hasFreshdeskFields = React.useMemo(() => {
+ return !!formElementsService.findFormElement(
+ form.elements,
+ (formElement) => {
+ const formElementWithOptions =
+ typeCastService.formElements.toOptionsElement(formElement)
+ return (
+ formElementWithOptions?.optionsType === 'FRESHDESK_FIELD' &&
+ !!formElementWithOptions.freshdeskFieldName
+ )
+ },
+ )
+ }, [form.elements])
+
+ const loadFreshdeskFields = React.useCallback(
+ async (abortSignal): Promise => {
+ if (hasFreshdeskFields) {
+ return await formService.getFreshdeskFields(form.id, abortSignal)
+ }
+ return []
+ },
+ [form.id, hasFreshdeskFields],
+ )
+
+ const [freshdeskFieldsState] = useLoadDataState(loadFreshdeskFields)
+
+ const loadFormElementOptionsSets = React.useCallback(
+ async (abortSignal) => {
+ const formElementOptionsSets =
+ await formService.getFormElementOptionsSets(
+ form.organisationId,
+ abortSignal,
+ )
+ return formElementOptionsSets.map(
+ (formElementOptionsSet) => ({
+ formElementOptionsSet,
+ }),
+ )
+ },
+ [form.organisationId],
+ )
+
+ const [optionsSetResultsState, , setOptionsSetResults] = useLoadDataState(
+ loadFormElementOptionsSets,
+ )
+
+ const optionsSetResults = React.useMemo(() => {
+ if (optionsSetResultsState.status === 'SUCCESS') {
+ return optionsSetResultsState.result
+ }
+ return []
+ }, [optionsSetResultsState])
+
+ const error = React.useMemo(() => {
+ if (freshdeskFieldsState.status === 'ERROR') {
+ return freshdeskFieldsState.error instanceof OneBlinkAppsError
+ ? freshdeskFieldsState.error
+ : new OneBlinkAppsError('An unknown error has occurred', {
+ originalError: freshdeskFieldsState.error,
+ })
+ }
+ if (optionsSetResultsState.status === 'ERROR') {
+ return optionsSetResultsState.error instanceof OneBlinkAppsError
+ ? optionsSetResultsState.error
+ : new OneBlinkAppsError('An unknown error has occurred', {
+ originalError: optionsSetResultsState.error,
+ })
+ }
+ for (const optionsSetResult of optionsSetResults) {
+ if (optionsSetResult.result?.type === 'ERROR') {
+ return optionsSetResult.result.error
+ }
+ }
+ }, [freshdeskFieldsState, optionsSetResults, optionsSetResultsState])
+
+ if (error) {
+ return (
+ <>
+
+
error
+
{error.title}
+
{error.message}
+
+ {localisationService.formatDatetimeLong(new Date())}
+
+