@oneblink/apps-react 12.0.0 → 13.0.0-beta.10

package/dist/OneBlinkFormBase.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
+import { flushSync } from 'react-dom';
 import { createTheme as createMuiTheme, ThemeProvider } from '@mui/material';
 import Tooltip from './components/renderer/Tooltip';
 import { Prompt, useHistory } from 'react-router-dom';
@@ -44,7 +45,40 @@ import { getElementDisplayNameForAnalyticsEvent, sendGoogleAnalyticsEvent, } fro
 import { useUserProfileForInjectablesOutsideContext } from './hooks/useUserProfileForInjectables';
 import { ValidationIconConfigurationContext } from './hooks/useValidationIconConfiguration';
 import { Clickable } from './components/Clickable';
-function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, getCurrentSubmissionDuration, onBeforeUnload, audience, }) {
+import { EditableFormElementIdsContext } from './hooks/useEditableFormElementIds';
+import { useRegisterFormSubmissionAttempt } from './hooks/useFormSubmissionAttempt';
+import { useRegisterFormIsDirty, FormMarkDirtyContextProvider, } from './hooks/useFormIsDirty';
+var AttachmentUploadStatus;
+(function (AttachmentUploadStatus) {
+    AttachmentUploadStatus["ATTACHMENTS_UPLOADED"] = "ATTACHMENTS_UPLOADED";
+    AttachmentUploadStatus["ATTACHMENTS_UPLOAD_BLOCKING"] = "ATTACHMENTS_UPLOAD_BLOCKING";
+    AttachmentUploadStatus["ATTACHMENTS_UPLOAD_NON_BLOCKING"] = "ATTACHMENTS_UPLOAD_NON_BLOCKING";
+})(AttachmentUploadStatus || (AttachmentUploadStatus = {}));
+var SubmissionPreparationStatus;
+(function (SubmissionPreparationStatus) {
+    SubmissionPreparationStatus["OFFLINE_SUBMISSION"] = "OFFLINE_SUBMISSION";
+    SubmissionPreparationStatus["SUBMISSION_READY"] = "SUBMISSION_READY";
+})(SubmissionPreparationStatus || (SubmissionPreparationStatus = {}));
+const idlePhase = { status: 'idle' };
+function HostPreparationEffect({ continueWithAttachments, prepareSubmission, onResult, }) {
+    // prepareSubmission is in the dep array so that an environment change
+    // (e.g. going offline) that recreates prepareSubmission will re-trigger
+    // preparation with the updated closure. The cleanup function cancels
+    // the prior in-flight call before the new one starts.
+    React.useEffect(() => {
+        let cancelled = false;
+        prepareSubmission(continueWithAttachments).then((result) => {
+            if (!cancelled) {
+                onResult(result);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [continueWithAttachments, onResult, prepareSubmission]);
+    return null;
+}
+function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, getCurrentSubmissionDuration, onBeforeUnload, audience, editableFormElementIds, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const isOffline = useIsOffline();
     const { isUsingFormsKey } = useAuth();
@@ -142,6 +176,8 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     });
     const [promptOfflineSubmissionAttempt, setPromptOfflineSubmissionAttempt] = React.useState(false);
     const [promptUploadingAttachments, setPromptUploadingAttachments] = React.useState(false);
+    const [hostAttemptPhase, setHostAttemptPhase] = React.useState(idlePhase);
+    const [hostAttemptResolver, setHostAttemptResolver] = React.useState(null);
     const handleBlockedNavigation = React.useCallback((location) => {
         setUnsavedChangesState((current) => ({
             ...current,
@@ -225,6 +261,13 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
             isNavigationAllowed: true,
         }));
     }, []);
+    const allowNavigationAfterHostAction = React.useCallback(() => {
+        // React Router DOM v5's <Prompt> has no imperative "proceed" API, so the
+        // guard must rerender as disabled before the host navigates in the same
+        // tick. Migrating to the React Router DOM v6 blocker APIs would allow the
+        // blocked transition to proceed directly without flushSync().
+        flushSync(allowNavigation);
+    }, [allowNavigation]);
     // #endregion Unsaved Changed
     //
     //
@@ -246,8 +289,8 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     const [isShowingValidationErrorsCard, setIsShowingValidationErrorsCard] = React.useState(false);
     const { validate } = useFormValidation(pages);
     const recaptchaType = React.useMemo(() => captchaType !== null && captchaType !== void 0 ? captchaType : 'CHECKBOX', [captchaType]);
-    const formElementsValidation = React.useMemo(() => !isReadOnly
-        ? validate(submission, formElementsConditionallyShown, executedLookups !== null && executedLookups !== void 0 ? executedLookups : {}, recaptchaType, isOffline)
+    const formElementsValidation = React.useMemo(() => !isReadOnly || editableFormElementIds !== undefined
+        ? validate(submission, formElementsConditionallyShown, executedLookups !== null && executedLookups !== void 0 ? executedLookups : {}, recaptchaType, isOffline, audience, editableFormElementIds)
         : undefined, [
         isReadOnly,
         validate,
@@ -256,6 +299,8 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         executedLookups,
         recaptchaType,
         isOffline,
+        audience,
+        editableFormElementIds,
     ]);
     React.useEffect(() => {
         if (!formElementsValidation) {
@@ -311,7 +356,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         // be taken care of by a pending queue if enabled, otherwise
         // the user will be prompted to try again or save a draft.
         if (isOffline) {
-            return true;
+            return AttachmentUploadStatus.ATTACHMENTS_UPLOADED;
         }
         const attachmentsAreUploading = attachmentsService.checkIfAttachmentsAreUploading(definition, submission);
         if (attachmentsAreUploading) {
@@ -324,14 +369,13 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
                     pauseOnHover: true,
                     closeOnClick: true,
                 });
-                return false;
+                return AttachmentUploadStatus.ATTACHMENTS_UPLOAD_BLOCKING;
             }
             else {
-                setPromptUploadingAttachments(true);
-                return false;
+                return AttachmentUploadStatus.ATTACHMENTS_UPLOAD_NON_BLOCKING;
             }
         }
-        return true;
+        return AttachmentUploadStatus.ATTACHMENTS_UPLOADED;
     }, [definition, isOffline, isPendingQueueEnabled, isUsingFormsKey]);
     const checkBsbsCanBeSubmitted = React.useCallback((submission) => {
         return !checkBsbsAreInvalid(definition, submission);
@@ -404,15 +448,29 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         if (!checkBsbsCanBeSubmitted(submissionData.submission)) {
             return;
         }
-        if (!continueWhilstAttachmentsAreUploading &&
-            !checkAttachmentsCanBeSubmitted(submissionData.submission)) {
-            return;
+        if (!continueWhilstAttachmentsAreUploading) {
+            const attachmentStatus = checkAttachmentsCanBeSubmitted(submissionData.submission);
+            switch (attachmentStatus) {
+                case AttachmentUploadStatus.ATTACHMENTS_UPLOAD_BLOCKING:
+                    // The submitter cannot upload attachments in the background and must wait for them to upload before submitting
+                    return;
+                case AttachmentUploadStatus.ATTACHMENTS_UPLOAD_NON_BLOCKING:
+                    // We can display a prompt allowing the submitter to upload attachments in the background
+                    return {
+                        status: attachmentStatus,
+                    };
+                case AttachmentUploadStatus.ATTACHMENTS_UPLOADED:
+                    break;
+                default:
+                    return;
+            }
         }
         if (captchaType === 'INVISIBLE') {
             if (captchasRef.current.length) {
                 if (isOffline) {
-                    setPromptOfflineSubmissionAttempt(true);
-                    return;
+                    return {
+                        status: SubmissionPreparationStatus.OFFLINE_SUBMISSION,
+                    };
                 }
                 const tokenResults = await Promise.allSettled(captchasRef.current.map((captcha) => captcha.executeAsync()));
                 const captchaTokens = [];
@@ -453,10 +511,14 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         }
         if (isOffline && !isPendingQueueEnabled) {
             console.log('User is offline and form does not support a pending queue');
-            setPromptOfflineSubmissionAttempt(true);
-            return;
+            return {
+                status: SubmissionPreparationStatus.OFFLINE_SUBMISSION,
+            };
         }
-        return submissionData;
+        return {
+            status: SubmissionPreparationStatus.SUBMISSION_READY,
+            submissionData: submissionData,
+        };
     }, [
         attachmentRetentionInDays,
         captchaType,
@@ -471,48 +533,122 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         setFormSubmission,
         shouldUseNavigableValidationErrorsNotification,
     ]);
+    const handleHostPreparationResult = React.useCallback((result) => {
+        if (!result) {
+            setHostAttemptPhase({ status: 'resolved', result: false });
+            return;
+        }
+        switch (result.status) {
+            case AttachmentUploadStatus.ATTACHMENTS_UPLOAD_NON_BLOCKING: {
+                setPromptUploadingAttachments(true);
+                setHostAttemptPhase({ status: 'prompt-attachments' });
+                break;
+            }
+            case SubmissionPreparationStatus.OFFLINE_SUBMISSION: {
+                setPromptOfflineSubmissionAttempt(true);
+                setHostAttemptPhase((current) => ({
+                    status: 'prompt-offline',
+                    continueWithAttachments: current.status === 'preparing'
+                        ? current.continueWithAttachments
+                        : false,
+                }));
+                break;
+            }
+            case SubmissionPreparationStatus.SUBMISSION_READY: {
+                setHostAttemptPhase({
+                    status: 'resolved',
+                    result: allowNavigationAfterHostAction,
+                });
+                break;
+            }
+        }
+    }, [allowNavigationAfterHostAction]);
+    const attemptFormSubmission = React.useCallback(() => {
+        setHasAttemptedSubmit(true);
+        setIsPreparingToSubmit(true);
+        setHostAttemptPhase({ status: 'preparing', continueWithAttachments: false });
+        return new Promise((resolve) => {
+            setHostAttemptResolver({ resolve });
+        });
+    }, []);
+    React.useEffect(() => {
+        if (hostAttemptPhase.status === 'resolved') {
+            setIsPreparingToSubmit(false);
+            hostAttemptResolver === null || hostAttemptResolver === void 0 ? void 0 : hostAttemptResolver.resolve(hostAttemptPhase.result);
+            setHostAttemptResolver(null);
+            setHostAttemptPhase(idlePhase);
+        }
+    }, [hostAttemptPhase, hostAttemptResolver]);
+    useRegisterFormSubmissionAttempt(editableFormElementIds === undefined ? undefined : attemptFormSubmission);
+    useRegisterFormIsDirty(definition.id, isDirty);
     const handleSubmit = React.useCallback(async (event, continueWhilstAttachmentsAreUploading) => {
         event.preventDefault();
-        if (disabled || isReadOnly)
+        // Approvers are not shown a submit button, so reaching here means the
+        // browser submitted the form implicitly (e.g. Enter in a text input).
+        // Approving is driven separately, and continuing would send a
+        // submission analytics event and display validation messages.
+        if (disabled || isReadOnly || audience === 'APPROVER')
             return;
         setHasAttemptedSubmit(true);
         setIsPreparingToSubmit(true);
-        const submissionData = await prepareSubmission(continueWhilstAttachmentsAreUploading);
-        if (!submissionData) {
+        const submissionResult = await prepareSubmission(continueWhilstAttachmentsAreUploading);
+        if (!submissionResult) {
             setIsPreparingToSubmit(false);
             return;
         }
-        allowNavigation();
-        // transplant injected options on the definition
-        const elementsWithInjectedOptions = injectOptionsAcrossAllElements({
-            contextElements: definition.elements,
-            elements: definition.elements,
-            submission: submissionData.submission,
-            taskContext: taskContextValue,
-            userProfile: userProfileForInjectables,
-        });
-        setIsPreparingToSubmit(false);
-        resetRecaptchas();
-        onSubmit({
-            definition: {
-                ...definition,
-                elements: elementsWithInjectedOptions,
-            },
-            submission: submissionData.submission,
-            recaptchas: submissionData.captchaTokens.map((token) => ({
-                token,
-                siteKey: captchaSiteKey,
-            })),
-        });
-        sendGoogleAnalyticsEvent('oneblink_form_submit', {
-            formId: definition.id,
-            formName: definition.name,
-            lastElementUpdated: getElementDisplayNameForAnalyticsEvent(lastElementUpdated),
-            durationUntilSubmission: getCurrentSubmissionDuration === null || getCurrentSubmissionDuration === void 0 ? void 0 : getCurrentSubmissionDuration(),
-        });
+        switch (submissionResult.status) {
+            case AttachmentUploadStatus.ATTACHMENTS_UPLOAD_NON_BLOCKING: {
+                setPromptUploadingAttachments(true);
+                setIsPreparingToSubmit(false);
+                return;
+            }
+            case SubmissionPreparationStatus.OFFLINE_SUBMISSION: {
+                setPromptOfflineSubmissionAttempt(true);
+                setIsPreparingToSubmit(false);
+                return;
+            }
+            case SubmissionPreparationStatus.SUBMISSION_READY: {
+                allowNavigation();
+                const submissionData = submissionResult.submissionData;
+                // transplant injected options on the definition
+                const elementsWithInjectedOptions = injectOptionsAcrossAllElements({
+                    contextElements: definition.elements,
+                    elements: definition.elements,
+                    submission: submissionData.submission,
+                    taskContext: taskContextValue,
+                    userProfile: userProfileForInjectables,
+                });
+                setIsPreparingToSubmit(false);
+                resetRecaptchas();
+                onSubmit({
+                    definition: {
+                        ...definition,
+                        elements: elementsWithInjectedOptions,
+                    },
+                    submission: submissionData.submission,
+                    recaptchas: submissionData.captchaTokens.map((token) => ({
+                        token,
+                        siteKey: captchaSiteKey,
+                    })),
+                });
+                sendGoogleAnalyticsEvent('oneblink_form_submit', {
+                    formId: definition.id,
+                    formName: definition.name,
+                    lastElementUpdated: getElementDisplayNameForAnalyticsEvent(lastElementUpdated),
+                    durationUntilSubmission: getCurrentSubmissionDuration === null || getCurrentSubmissionDuration === void 0 ? void 0 : getCurrentSubmissionDuration(),
+                });
+                return;
+            }
+            default: {
+                const never = submissionResult;
+                setIsPreparingToSubmit(false);
+                return never;
+            }
+        }
     }, [
         disabled,
         isReadOnly,
+        audience,
         prepareSubmission,
         allowNavigation,
         definition,
@@ -535,9 +671,18 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
             if (!checkBsbAreValidating(submission)) {
                 return;
             }
-            if (!continueWhilstAttachmentsAreUploading &&
-                !checkAttachmentsCanBeSubmitted(submission)) {
-                return;
+            if (!continueWhilstAttachmentsAreUploading) {
+                const attachmentCheckResult = checkAttachmentsCanBeSubmitted(submission);
+                if (attachmentCheckResult ===
+                    AttachmentUploadStatus.ATTACHMENTS_UPLOAD_NON_BLOCKING) {
+                    setPromptUploadingAttachments(true);
+                    return;
+                }
+                if (attachmentCheckResult ===
+                    AttachmentUploadStatus.ATTACHMENTS_UPLOAD_BLOCKING) {
+                    // The submitter cannot upload attachments in the background and must wait for them to upload before saving draft
+                    return;
+                }
             }
             onSaveDraft({
                 definition,
@@ -562,6 +707,13 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     ]);
     const handleContinueWithAttachments = React.useCallback((e) => {
         setPromptUploadingAttachments(false);
+        if (hostAttemptPhase.status === 'prompt-attachments') {
+            setHostAttemptPhase({
+                status: 'preparing',
+                continueWithAttachments: true,
+            });
+            return;
+        }
         if (hasAttemptedSubmit) {
             handleSubmit(e, true);
         }
@@ -570,121 +722,129 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         }
     }, [
         handleSubmit,
-        setPromptUploadingAttachments,
+        hostAttemptPhase.status,
         hasAttemptedSubmit,
         handleSaveDraft,
     ]);
     const handleWaitForAttachments = React.useCallback(() => {
         setPromptUploadingAttachments(false);
-    }, [setPromptUploadingAttachments]);
+        if (hostAttemptPhase.status === 'prompt-attachments') {
+            setHostAttemptPhase({ status: 'resolved', result: false });
+        }
+    }, [hostAttemptPhase.status]);
+    const handleCancelOfflineSubmission = React.useCallback(() => {
+        setPromptOfflineSubmissionAttempt(false);
+        if (hostAttemptPhase.status === 'prompt-offline') {
+            setHostAttemptPhase({ status: 'resolved', result: false });
+        }
+    }, [hostAttemptPhase.status]);
+    const handleRetryOfflineSubmission = React.useCallback((e) => {
+        setPromptOfflineSubmissionAttempt(false);
+        if (hostAttemptPhase.status === 'prompt-offline') {
+            setHostAttemptPhase({
+                status: 'preparing',
+                continueWithAttachments: hostAttemptPhase.continueWithAttachments,
+            });
+        }
+        else {
+            handleSubmit(e, false);
+        }
+    }, [
+        handleSubmit,
+        hostAttemptPhase,
+    ]);
     // #endregion
     //
     //
     //
     //
-    // #region Lookups
-    const { handlePagesLookupResult } = useLookups(definition.id, setFormSubmission);
-    // #endregion
+    // #region Submission/Definition Changes
+    const markFormDirty = React.useCallback(() => {
+        setUnsavedChangesState((current) => ({
+            ...current,
+            isDirty: true,
+        }));
+    }, []);
     //
     //
+    // #region Lookups
+    const { handlePagesLookupResult } = useLookups(definition.id, setFormSubmission, markFormDirty);
+    // #endregion
     //
     //
-    // #region Submission/Definition Changes
-    const handleChange = React.useCallback((element, { value, executedLookups, deleteSection, sectionState }) => {
+    const handleChange = React.useCallback((element, { value, executedLookups, deleteSection, sectionState, isDerivedChange }) => {
         if (
-        //This will ensure on a read only form that the summary and calculation elements
-        //can still be displayed as it needs handleChange so it can render
-        //due to the dynamic nature of the summary element.
-        (disabled &&
-            element.type !== 'summary' &&
-            element.type !== 'calculation') ||
+        // Disabled forms still need derived writers (calculation, summary, …)
+        // so those elements can recompute and display from the current model.
+        (disabled && !isDerivedChange) ||
             element.type === 'page') {
             return;
         }
-        switch (element.type) {
-            case 'section': {
-                setFormSubmission((currentFormSubmission) => {
-                    const currentSectionState = currentFormSubmission.sectionState || [];
-                    const existingSectionIndex = currentSectionState.findIndex((section) => section.id === element.id);
-                    const sectionIsInState = existingSectionIndex >= 0;
-                    let newSectionState;
-                    if (sectionIsInState && deleteSection) {
-                        newSectionState = currentSectionState.filter((section) => section.id !== element.id);
-                    }
-                    else if (sectionIsInState) {
-                        // Update state of the section
-                        newSectionState = currentSectionState.map((section, index) => index === existingSectionIndex
-                            ? {
-                                ...section,
-                                state: section.state === 'COLLAPSED'
-                                    ? 'EXPANDED'
-                                    : 'COLLAPSED',
-                            }
-                            : section);
-                    }
-                    else {
-                        // Add the section to state
-                        newSectionState = [
-                            ...currentSectionState,
-                            {
-                                id: element.id,
-                                state: element.isCollapsed ? 'EXPANDED' : 'COLLAPSED',
-                            },
-                        ];
-                    }
-                    return {
-                        ...currentFormSubmission,
-                        sectionState: newSectionState,
-                    };
-                });
-                break;
-            }
-            // Don't update the last element updated for elements the user cannot set the value of
-            case 'summary':
-            case 'calculation': {
-                setFormSubmission((currentFormSubmission) => ({
-                    ...currentFormSubmission,
-                    submission: {
-                        ...currentFormSubmission.submission,
-                        [element.name]: typeof value === 'function'
-                            ? value(currentFormSubmission.submission[element.name])
-                            : value,
-                    },
-                }));
-                break;
-            }
-            default: {
-                setUnsavedChangesState((current) => ({
-                    ...current,
-                    isDirty: true,
-                }));
-                setFormSubmission((currentFormSubmission) => {
-                    var _a;
-                    return {
-                        ...currentFormSubmission,
-                        submission: {
-                            ...currentFormSubmission.submission,
-                            [element.name]: typeof value === 'function'
-                                ? value(currentFormSubmission.submission[element.name])
-                                : value,
-                        },
-                        lastElementUpdated: element,
-                        executedLookups: {
-                            ...currentFormSubmission.executedLookups,
-                            [element.name]: typeof executedLookups === 'function'
-                                ? executedLookups((_a = currentFormSubmission.executedLookups) === null || _a === void 0 ? void 0 : _a[element.name])
-                                : executedLookups,
+        if (element.type === 'section') {
+            setFormSubmission((currentFormSubmission) => {
+                const currentSectionState = currentFormSubmission.sectionState || [];
+                const existingSectionIndex = currentSectionState.findIndex((section) => section.id === element.id);
+                const sectionIsInState = existingSectionIndex >= 0;
+                let newSectionState;
+                if (sectionIsInState && deleteSection) {
+                    newSectionState = currentSectionState.filter((section) => section.id !== element.id);
+                }
+                else if (sectionIsInState) {
+                    // Update state of the section
+                    newSectionState = currentSectionState.map((section, index) => index === existingSectionIndex
+                        ? {
+                            ...section,
+                            state: section.state === 'COLLAPSED' ? 'EXPANDED' : 'COLLAPSED',
+                        }
+                        : section);
+                }
+                else {
+                    // Add the section to state
+                    newSectionState = [
+                        ...currentSectionState,
+                        {
+                            id: element.id,
+                            state: element.isCollapsed ? 'EXPANDED' : 'COLLAPSED',
                         },
-                        sectionState: sectionState
-                            ? typeof sectionState === 'function'
-                                ? sectionState(currentFormSubmission.sectionState)
-                                : sectionState
-                            : currentFormSubmission.sectionState,
-                    };
-                });
-            }
+                    ];
+                }
+                return {
+                    ...currentFormSubmission,
+                    sectionState: newSectionState,
+                };
+            });
+            return;
+        }
+        if (!isDerivedChange) {
+            markFormDirty();
         }
-    }, [disabled, setFormSubmission]);
+        setFormSubmission((currentFormSubmission) => {
+            var _a;
+            return {
+                ...currentFormSubmission,
+                submission: {
+                    ...currentFormSubmission.submission,
+                    [element.name]: typeof value === 'function'
+                        ? value(currentFormSubmission.submission[element.name])
+                        : value,
+                },
+                lastElementUpdated: isDerivedChange
+                    ? currentFormSubmission.lastElementUpdated
+                    : element,
+                executedLookups: {
+                    ...currentFormSubmission.executedLookups,
+                    [element.name]: typeof executedLookups === 'function'
+                        ? executedLookups((_a = currentFormSubmission.executedLookups) === null || _a === void 0 ? void 0 : _a[element.name])
+                        : executedLookups,
+                },
+                sectionState: sectionState
+                    ? typeof sectionState === 'function'
+                        ? sectionState(currentFormSubmission.sectionState)
+                        : sectionState
+                    : currentFormSubmission.sectionState,
+            };
+        }, { isDerivedChange });
+    }, [disabled, markFormDirty, setFormSubmission]);
     // #endregion
     //
     //
@@ -734,55 +894,58 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     if (conditionalLogicError) {
         return (_jsx(_Fragment, { children: _jsxs("div", { className: "has-text-centered", children: [_jsx(MaterialIcon, { className: "has-text-warning icon-x-large", children: "error" }), _jsx("h3", { className: "title is-3", children: "Bad Form Configuration" }), _jsx("p", { className: "cypress-conditional-logic-error-message", children: conditionalLogicError.message }), _jsx("p", { className: "has-text-grey", children: localisationService.formatDatetimeLong(new Date()) })] }) }));
     }
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(ReplaceInjectablesOverridesContext.Provider, { value: replaceInjectablesOverrides, children: _jsx(FormDefinitionContext.Provider, { value: definition, children: _jsx(FormElementOptionsContextProvider, { formIsReadOnly: isReadOnly, children: _jsx(FormElementLookupsContextProvider, { children: _jsx(OneBlinkFormContainerContext.Provider, { value: obFormContainerHTMLElementRef, children: _jsxs("div", { className: clsx('ob-form-container', {
-                                        'is-showing-pages': isShowingMultiplePages,
-                                    }), ref: obFormContainerHTMLElementRef, children: [_jsx("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: (e) => handleSubmit(e, false), children: _jsxs("div", { children: [_jsx("div", { ref: scrollToTopOfPageHTMLElementRef }), isShowingMultiplePages && (_jsxs("div", { className: clsx('ob-steps-navigation', {
-                                                            'is-active': isStepsHeaderActive,
-                                                        }), children: [_jsxs(Clickable, { className: clsx('ob-steps-navigation__header', {
-                                                                    'is-active': isStepsHeaderActive,
-                                                                }), onClick: toggleStepsNavigation, children: [_jsx("span", { className: "icon is-invisible", children: _jsx(MaterialIcon, { children: "keyboard_arrow_down" }) }), _jsxs("div", { className: "steps-header-active-page", children: [isDisplayingCurrentPageError ? (_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { className: "has-text-danger is-size-4", children: "warning" }) })) : (_jsx("span", { className: "steps-header-active-page-icon", children: currentPageNumber })), _jsx("span", { className: "steps-header-active-page-label cypress-tablet-step-title", children: currentPage ? currentPage.label : '' })] }), _jsx("span", { className: "dropdown icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_down" }) })] }), _jsx("div", { role: "navigation", className: clsx('ob-steps-navigation__steps', {
-                                                                    'is-active': isStepsHeaderActive,
-                                                                }), children: _jsx("div", { className: "steps is-small is-horizontal-tablet cypress-steps", children: visiblePages.map((page, index) => {
-                                                                        const hasErrors = checkDisplayPageError(page);
-                                                                        return (_jsxs(Clickable, { id: `steps-navigation-step-${page.id}`, "aria-label": `${page.label}, page ${index + 1} of ${visiblePages.length}`, "aria-current": currentPage.id === page.id
-                                                                                ? 'step'
-                                                                                : undefined, className: clsx('step-item cypress-step-item', {
-                                                                                'is-active': currentPage.id === page.id,
-                                                                                'is-completed': currentPageIndex > index,
-                                                                                'is-error': hasErrors,
-                                                                            }), onClick: (e) => {
-                                                                                e.stopPropagation();
-                                                                                if (page.id !== currentPage.id) {
-                                                                                    setPageId(page.id);
-                                                                                }
-                                                                            }, children: [_jsx("div", { className: "step-marker step-marker-error ob-step-marker cypress-step-marker", 
-                                                                                    // @ts-expect-error ???
-                                                                                    name: `cypress-page-stepper-${index + 1}`, value: index + 1, children: hasErrors ? (_jsx(Tooltip, { title: "Page has errors", children: _jsx("span", { className: "icon tooltip has-tooltip-top cypress-page-error", children: _jsx(MaterialIcon, { className: "has-text-danger is-size-3", children: "warning" }) }) })) : (_jsx("span", { children: index + 1 })) }), _jsx("div", { className: "step-details ob-step-details", children: _jsx("p", { className: "step-title ob-step-title cypress-desktop-step-title", id: `steps-navigation-step-label-${page.id}`, children: page.label }) })] }, page.id));
-                                                                    }) }) })] })), _jsx("div", { className: clsx('ob-steps-navigation__background', {
-                                                            'is-active': isStepsHeaderActive,
-                                                        }), onClick: toggleStepsNavigation }), _jsxs("div", { className: "steps", children: [_jsx("div", { className: clsx('steps-content', {
-                                                                    'is-single-step': !isShowingMultiplePages,
-                                                                }), children: _jsx(InjectPagesContext.Provider, { value: handlePagesLookupResult, children: _jsx(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey, children: _jsx(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid, children: _jsx(ValidationIconConfigurationContext.Provider, { value: validationIcon, children: _jsx(CaptchaContext.Provider, { value: captchaContextValue, children: _jsx(AttachmentBlobsProvider, { children: _jsx(FormIsReadOnlyContext.Provider, { value: isReadOnly, children: _jsx(FormAudienceContext.Provider, { value: audience, children: _jsx(TaskContext.Provider, { value: taskContextValue, children: _jsx(OnUploadAttachmentContext.Provider, { value: onUploadAttachment, children: visiblePages.map((pageElement) => (_jsx(PageFormElements, { isActive: pageElement.id ===
-                                                                                                                currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
-                                                                                                                isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission, sectionState: sectionState }, pageElement.id))) }) }) }) }) }) }) }) }) }) }) }), isShowingMultiplePages && (_jsxs("div", { className: "steps-actions", children: [_jsx("div", { className: "steps-action", children: _jsxs("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous", children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_left" }) }), _jsx("span", { children: "Back" })] }) }), _jsx("div", { className: "step-progress-mobile cypress-steps-mobile", children: visiblePages.map((page, index) => (_jsx("div", { className: clsx('step-progress-mobile-dot', {
-                                                                                'is-active': currentPage.id === page.id,
-                                                                                'is-completed': currentPageIndex > index,
-                                                                                'has-background-danger': currentPage.id !== page.id &&
-                                                                                    checkDisplayPageError(page),
-                                                                            }) }, page.id))) }), _jsx("div", { className: "steps-action", children: _jsxs("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next", children: [_jsx("span", { children: "Next" }), _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_right" }) })] }) })] }))] }), !isReadOnly && (_jsxs("div", { className: "buttons ob-buttons ob-buttons-submit", children: [onSaveDraft && !isInfoPage && (_jsx("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: () => handleSaveDraft(false), disabled: isPreview || disabled, children: _jsx(CustomisableButtonInner, { label: ((_a = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _a === void 0 ? void 0 : _a.label) || 'Save Draft', icon: (_b = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _b === void 0 ? void 0 : _b.icon }) })), _jsx("span", { className: "ob-buttons-submit__spacer" }), !isInfoPage && (_jsx("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled, children: _jsx(CustomisableButtonInner, { label: ((_c = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _c === void 0 ? void 0 : _c.label) || 'Cancel', icon: (_d = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _d === void 0 ? void 0 : _d.icon }) })), isLastVisiblePage && (_jsx(Tooltip, { title: submissionConditionallyEnabled
-                                                                    ? ''
-                                                                    : 'Submission disabled: Your inputs have not met the criteria for submission', children: _jsx("span", { children: _jsx("button", { type: "submit", className: clsx('button ob-button is-success ob-button-submit cypress-submit-form-button cypress-submit-form', { 'is-loading': isPreparingToSubmit }, {
-                                                                            'ob-button-submit-is-disabled': submissionConditionallyEnabled,
-                                                                        }), disabled: isPreview ||
-                                                                            disabled ||
-                                                                            isPreparingToSubmit ||
-                                                                            !submissionConditionallyEnabled, children: _jsx(CustomisableButtonInner, { label: isInfoPage
-                                                                                ? 'Done'
-                                                                                : ((_e = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _e === void 0 ? void 0 : _e.label) || 'Submit', icon: (_f = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _f === void 0 ? void 0 : _f.icon }) }) }) }))] }))] }) }), !isReadOnly && !isPreview && (_jsxs(React.Fragment, { children: [_jsx(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }), _jsx(Modal, { isOpen: hasConfirmedNavigation === false, title: "Unsaved Changes", cardClassName: "cypress-cancel-confirm", titleClassName: "cypress-cancel-confirm-title", bodyClassName: "cypress-cancel-confirm-body", actions: _jsxs(_Fragment, { children: [onSaveDraft && (_jsx("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: () => handleSaveDraft(false), children: _jsx(CustomisableButtonInner, { label: ((_g = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _g === void 0 ? void 0 : _g.label) || 'Save Draft', icon: (_h = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _h === void 0 ? void 0 : _h.icon }) })), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing, children: _jsx(CustomisableButtonInner, { label: ((_j = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _j === void 0 ? void 0 : _j.label) || 'Back', icon: (_k = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _k === void 0 ? void 0 : _k.icon }) }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges, autoFocus: true, children: _jsx(CustomisableButtonInner, { label: ((_l = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _l === void 0 ? void 0 : _l.label) || 'Discard', icon: (_m = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _m === void 0 ? void 0 : _m.icon }) })] }), children: _jsx("p", { children: "You have unsaved changes, are you sure you want discard them?" }) }), _jsx(Modal, { isOpen: promptUploadingAttachments === true, title: "Attachment upload in progress", cardClassName: "cypress-attachments-wait-continue", titleClassName: "cypress-attachments-confirm-wait-title", bodyClassName: "cypress-attachments-confirm-wait-body", actions: _jsxs(_Fragment, { children: [_jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "button ob-button is-light cypress-attachments-confirm-wait", onClick: handleWaitForAttachments, children: "Wait" }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-attachments-confirm-continue", onClick: handleContinueWithAttachments, autoFocus: true, children: "Continue" })] }), children: _jsx("p", { children: "Your attachments are still uploading, do you want to wait for the uploads to complete or continue using the app? If you click continue the attachments will upload in the background. Do not close the app until the upload has been completed." }) }), _jsxs(Modal, { isOpen: promptOfflineSubmissionAttempt, title: "It looks like you're Offline", className: "ob-modal__offline-submission-attempt", cardClassName: "cypress-submission-offline has-text-centered", titleClassName: "cypress-offline-title", bodyClassName: "cypress-offline-body", actions: _jsxs(_Fragment, { children: [onSaveDraft && (_jsx("button", { type: "button", className: "button ob-button ob-button__offline-submission-attempt-save-draft is-success", onClick: () => handleSaveDraft(false), children: _jsx(CustomisableButtonInner, { label: ((_o = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _o === void 0 ? void 0 : _o.label) || 'Save Draft', icon: (_p = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _p === void 0 ? void 0 : _p.icon }) })), _jsx("span", { style: { flex: 1 } }), _jsx("button", { className: "button ob-button ob-button__offline-submission-attempt-cancel is-light", onClick: () => setPromptOfflineSubmissionAttempt(false), children: "Cancel" }), _jsx("button", { className: "button ob-button ob-button__offline-submission-attempt-try-again is-primary", onClick: (e) => {
-                                                                    setPromptOfflineSubmissionAttempt(false);
-                                                                    handleSubmit(e, false);
-                                                                }, autoFocus: true, children: "Try Again" })] }), children: [_jsxs("p", { className: "ob-modal__offline-submission-attempt-message", children: ["You cannot submit this form while offline, please try again when connectivity is restored.", onSaveDraft && (_jsxs("span", { className: "ob-modal__offline-submission-attempt-save-draft-message", children: [' ', "Alternatively, click the", ' ', _jsx("b", { children: ((_q = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _q === void 0 ? void 0 : _q.label) || 'Save Draft' }), ' ', "button below to come back to this later."] }))] }), _jsx(MaterialIcon, { className: "has-text-warning icon-x-large ob-modal__offline-submission-attempt-icon", children: "wifi_off" })] })] })), shouldUseNavigableValidationErrorsNotification &&
-                                            isShowingValidationErrorsCard && (_jsx(ValidationErrorsCard, { visiblePages: visiblePages, formElementsValidation: formElementsValidation, setPageId: setPageId, currentPage: currentPage, navigationTopOffset: (_r = navigableValidationErrorsNotificationSettings === null || navigableValidationErrorsNotificationSettings === void 0 ? void 0 : navigableValidationErrorsNotificationSettings.navigationTopOffset) !== null && _r !== void 0 ? _r : 'CALCULATE', scrollableContainerId: navigableValidationErrorsNotificationSettings === null || navigableValidationErrorsNotificationSettings === void 0 ? void 0 : navigableValidationErrorsNotificationSettings.scrollableContainerId, validationErrorToastFocusElementRef: validationErrorToastFocusElementRef }))] }) }) }) }) }) }) }) }));
+    return (_jsx(FormMarkDirtyContextProvider, { markDirty: markFormDirty, children: _jsx(ThemeProvider, { theme: theme, children: _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(ReplaceInjectablesOverridesContext.Provider, { value: replaceInjectablesOverrides, children: _jsx(FormDefinitionContext.Provider, { value: definition, children: _jsx(FormElementOptionsContextProvider, { formIsReadOnly: isReadOnly, children: _jsx(FormElementLookupsContextProvider, { children: _jsx(OneBlinkFormContainerContext.Provider, { value: obFormContainerHTMLElementRef, children: _jsxs("div", { className: clsx('ob-form-container', {
+                                            'is-showing-pages': isShowingMultiplePages,
+                                        }), ref: obFormContainerHTMLElementRef, children: [_jsx("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: (e) => handleSubmit(e, false), children: _jsxs("div", { children: [_jsx("div", { ref: scrollToTopOfPageHTMLElementRef }), isShowingMultiplePages && (_jsxs("div", { className: clsx('ob-steps-navigation', {
+                                                                'is-active': isStepsHeaderActive,
+                                                            }), children: [_jsxs(Clickable, { className: clsx('ob-steps-navigation__header', {
+                                                                        'is-active': isStepsHeaderActive,
+                                                                    }), onClick: toggleStepsNavigation, children: [_jsx("span", { className: "icon is-invisible", children: _jsx(MaterialIcon, { children: "keyboard_arrow_down" }) }), _jsxs("div", { className: "steps-header-active-page", children: [isDisplayingCurrentPageError ? (_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { className: "has-text-danger is-size-4", children: "warning" }) })) : (_jsx("span", { className: "steps-header-active-page-icon", children: currentPageNumber })), _jsx("span", { className: "steps-header-active-page-label cypress-tablet-step-title", children: currentPage ? currentPage.label : '' })] }), _jsx("span", { className: "dropdown icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_down" }) })] }), _jsx("div", { role: "navigation", className: clsx('ob-steps-navigation__steps', {
+                                                                        'is-active': isStepsHeaderActive,
+                                                                    }), children: _jsx("div", { className: "steps is-small is-horizontal-tablet cypress-steps", children: visiblePages.map((page, index) => {
+                                                                            const hasErrors = checkDisplayPageError(page);
+                                                                            return (_jsxs(Clickable, { id: `steps-navigation-step-${page.id}`, "aria-label": `${page.label}, page ${index + 1} of ${visiblePages.length}`, "aria-current": currentPage.id === page.id
+                                                                                    ? 'step'
+                                                                                    : undefined, className: clsx('step-item cypress-step-item', {
+                                                                                    'is-active': currentPage.id === page.id,
+                                                                                    'is-completed': currentPageIndex > index,
+                                                                                    'is-error': hasErrors,
+                                                                                }), onClick: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    if (page.id !== currentPage.id) {
+                                                                                        setPageId(page.id);
+                                                                                    }
+                                                                                }, children: [_jsx("div", { className: "step-marker step-marker-error ob-step-marker cypress-step-marker", 
+                                                                                        // @ts-expect-error ???
+                                                                                        name: `cypress-page-stepper-${index + 1}`, value: index + 1, children: hasErrors ? (_jsx(Tooltip, { title: "Page has errors", children: _jsx("span", { className: "icon tooltip has-tooltip-top cypress-page-error", children: _jsx(MaterialIcon, { className: "has-text-danger is-size-3", children: "warning" }) }) })) : (_jsx("span", { children: index + 1 })) }), _jsx("div", { className: "step-details ob-step-details", children: _jsx("p", { className: "step-title ob-step-title cypress-desktop-step-title", id: `steps-navigation-step-label-${page.id}`, children: page.label }) })] }, page.id));
+                                                                        }) }) })] })), _jsx("div", { className: clsx('ob-steps-navigation__background', {
+                                                                'is-active': isStepsHeaderActive,
+                                                            }), onClick: toggleStepsNavigation }), _jsxs("div", { className: "steps", children: [_jsx("div", { className: clsx('steps-content', {
+                                                                        'is-single-step': !isShowingMultiplePages,
+                                                                    }), children: _jsx(InjectPagesContext.Provider, { value: handlePagesLookupResult, children: _jsx(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey, children: _jsx(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid, children: _jsx(ValidationIconConfigurationContext.Provider, { value: validationIcon, children: _jsx(CaptchaContext.Provider, { value: captchaContextValue, children: _jsx(AttachmentBlobsProvider, { children: _jsx(FormIsReadOnlyContext.Provider, { value: isReadOnly, children: _jsx(EditableFormElementIdsContext.Provider, { value: editableFormElementIds, children: _jsx(FormAudienceContext.Provider, { value: audience, children: _jsx(TaskContext.Provider, { value: taskContextValue, children: _jsx(OnUploadAttachmentContext.Provider, { value: onUploadAttachment, children: visiblePages.map((pageElement) => (_jsx(PageFormElements, { isActive: pageElement.id ===
+                                                                                                                        currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
+                                                                                                                        isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission, sectionState: sectionState }, pageElement.id))) }) }) }) }) }) }) }) }) }) }) }) }), isShowingMultiplePages && (_jsxs("div", { className: "steps-actions", children: [_jsx("div", { className: "steps-action", children: _jsxs("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous", children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_left" }) }), _jsx("span", { children: "Back" })] }) }), _jsx("div", { className: "step-progress-mobile cypress-steps-mobile", children: visiblePages.map((page, index) => (_jsx("div", { className: clsx('step-progress-mobile-dot', {
+                                                                                    'is-active': currentPage.id === page.id,
+                                                                                    'is-completed': currentPageIndex > index,
+                                                                                    'has-background-danger': currentPage.id !== page.id &&
+                                                                                        checkDisplayPageError(page),
+                                                                                }) }, page.id))) }), _jsx("div", { className: "steps-action", children: _jsxs("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next", children: [_jsx("span", { children: "Next" }), _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_right" }) })] }) })] }))] }), !isReadOnly && audience !== 'APPROVER' && (_jsxs("div", { className: "buttons ob-buttons ob-buttons-submit", children: [onSaveDraft && !isInfoPage && (_jsx("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: () => handleSaveDraft(false), disabled: isPreview || disabled, children: _jsx(CustomisableButtonInner, { label: ((_a = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _a === void 0 ? void 0 : _a.label) || 'Save Draft', icon: (_b = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _b === void 0 ? void 0 : _b.icon }) })), _jsx("span", { className: "ob-buttons-submit__spacer" }), !isInfoPage && (_jsx("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled, children: _jsx(CustomisableButtonInner, { label: ((_c = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _c === void 0 ? void 0 : _c.label) || 'Cancel', icon: (_d = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _d === void 0 ? void 0 : _d.icon }) })), isLastVisiblePage && (_jsx(Tooltip, { title: submissionConditionallyEnabled
+                                                                        ? ''
+                                                                        : 'Submission disabled: Your inputs have not met the criteria for submission', children: _jsx("span", { children: _jsx("button", { type: "submit", className: clsx('button ob-button is-success ob-button-submit cypress-submit-form-button cypress-submit-form', { 'is-loading': isPreparingToSubmit }, {
+                                                                                'ob-button-submit-is-disabled': submissionConditionallyEnabled,
+                                                                            }), disabled: isPreview ||
+                                                                                disabled ||
+                                                                                isPreparingToSubmit ||
+                                                                                !submissionConditionallyEnabled, children: _jsx(CustomisableButtonInner, { label: isInfoPage
+                                                                                    ? 'Done'
+                                                                                    : ((_e = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _e === void 0 ? void 0 : _e.label) || 'Submit', icon: (_f = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _f === void 0 ? void 0 : _f.icon }) }) }) }))] }))] }) }), !isPreview &&
+                                                (editableFormElementIds !== undefined ||
+                                                    !isReadOnly) && (_jsxs(React.Fragment, { children: [_jsx(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }), _jsx(Modal, { isOpen: hasConfirmedNavigation === false, title: "Unsaved Changes", cardClassName: "cypress-cancel-confirm", titleClassName: "cypress-cancel-confirm-title", bodyClassName: "cypress-cancel-confirm-body", actions: _jsxs(_Fragment, { children: [onSaveDraft && (_jsx("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: () => handleSaveDraft(false), children: _jsx(CustomisableButtonInner, { label: ((_g = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _g === void 0 ? void 0 : _g.label) ||
+                                                                            'Save Draft', icon: (_h = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _h === void 0 ? void 0 : _h.icon }) })), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing, children: _jsx(CustomisableButtonInner, { label: ((_j = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _j === void 0 ? void 0 : _j.label) || 'Back', icon: (_k = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _k === void 0 ? void 0 : _k.icon }) }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges, autoFocus: true, children: _jsx(CustomisableButtonInner, { label: ((_l = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _l === void 0 ? void 0 : _l.label) ||
+                                                                            'Discard', icon: (_m = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _m === void 0 ? void 0 : _m.icon }) })] }), children: _jsx("p", { children: "You have unsaved changes, are you sure you want discard them?" }) }), hostAttemptPhase.status === 'preparing' && (_jsx(HostPreparationEffect, { continueWithAttachments: hostAttemptPhase.continueWithAttachments, prepareSubmission: prepareSubmission, onResult: handleHostPreparationResult })), _jsx(Modal, { isOpen: promptUploadingAttachments === true, title: "Attachment upload in progress", cardClassName: "cypress-attachments-wait-continue", titleClassName: "cypress-attachments-confirm-wait-title", bodyClassName: "cypress-attachments-confirm-wait-body", actions: _jsxs(_Fragment, { children: [_jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "button ob-button is-light cypress-attachments-confirm-wait", onClick: handleWaitForAttachments, children: "Wait" }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-attachments-confirm-continue", onClick: handleContinueWithAttachments, autoFocus: true, children: "Continue" })] }), children: _jsx("p", { children: "Your attachments are still uploading, do you want to wait for the uploads to complete or continue using the app? If you click continue the attachments will upload in the background. Do not close the app until the upload has been completed." }) }), _jsxs(Modal, { isOpen: promptOfflineSubmissionAttempt, title: "It looks like you're Offline", className: "ob-modal__offline-submission-attempt", cardClassName: "cypress-submission-offline has-text-centered", titleClassName: "cypress-offline-title", bodyClassName: "cypress-offline-body", actions: _jsxs(_Fragment, { children: [onSaveDraft && (_jsx("button", { type: "button", className: "button ob-button ob-button__offline-submission-attempt-save-draft is-success", onClick: () => handleSaveDraft(false), children: _jsx(CustomisableButtonInner, { label: ((_o = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _o === void 0 ? void 0 : _o.label) ||
+                                                                            'Save Draft', icon: (_p = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _p === void 0 ? void 0 : _p.icon }) })), _jsx("span", { style: { flex: 1 } }), _jsx("button", { className: "button ob-button ob-button__offline-submission-attempt-cancel is-light cypress-offline-submission-cancel", onClick: handleCancelOfflineSubmission, children: "Cancel" }), _jsx("button", { className: "button ob-button ob-button__offline-submission-attempt-try-again is-primary cypress-offline-submission-try-again", onClick: handleRetryOfflineSubmission, autoFocus: true, children: "Try Again" })] }), children: [_jsxs("p", { className: "ob-modal__offline-submission-attempt-message", children: ["You cannot submit this form while offline, please try again when connectivity is restored.", onSaveDraft && (_jsxs("span", { className: "ob-modal__offline-submission-attempt-save-draft-message", children: [' ', "Alternatively, click the", ' ', _jsx("b", { children: ((_q = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _q === void 0 ? void 0 : _q.label) ||
+                                                                                    'Save Draft' }), ' ', "button below to come back to this later."] }))] }), _jsx(MaterialIcon, { className: "has-text-warning icon-x-large ob-modal__offline-submission-attempt-icon", children: "wifi_off" })] })] })), shouldUseNavigableValidationErrorsNotification &&
+                                                isShowingValidationErrorsCard && (_jsx(ValidationErrorsCard, { visiblePages: visiblePages, formElementsValidation: formElementsValidation, setPageId: setPageId, currentPage: currentPage, navigationTopOffset: (_r = navigableValidationErrorsNotificationSettings === null || navigableValidationErrorsNotificationSettings === void 0 ? void 0 : navigableValidationErrorsNotificationSettings.navigationTopOffset) !== null && _r !== void 0 ? _r : 'CALCULATE', scrollableContainerId: navigableValidationErrorsNotificationSettings === null || navigableValidationErrorsNotificationSettings === void 0 ? void 0 : navigableValidationErrorsNotificationSettings.scrollableContainerId, validationErrorToastFocusElementRef: validationErrorToastFocusElementRef }))] }) }) }) }) }) }) }) }) }));
 }
 export default React.memo(OneBlinkFormBase);
 //# sourceMappingURL=OneBlinkFormBase.js.map