@oneblink/apps-react 2.3.0-beta.2 → 2.3.0-beta.4

package/dist/OneBlinkFormBase.js

@@ -1,473 +1,480 @@
-import * as React from 'react';
-import { createTheme as createMuiTheme, ThemeProvider, Tooltip, } from '@mui/material';
-import { Prompt, useHistory } from 'react-router-dom';
-import clsx from 'clsx';
-import * as bulmaToast from 'bulma-toast';
-import { localisationService } from '@oneblink/apps';
-import Modal from './components/renderer/Modal';
-import OneBlinkAppsErrorOriginalMessage from './components/renderer/OneBlinkAppsErrorOriginalMessage';
-import cleanFormSubmissionModel from './services/cleanFormSubmissionModel';
-import PageFormElements from './components/renderer/PageFormElements';
-import useFormValidation from './hooks/useFormValidation';
-import useConditionalLogic from './hooks/useConditionalLogic';
-import usePages from './hooks/usePages';
-import useLookups from './hooks/useLookups';
-import { FormDefinitionContext } from './hooks/useFormDefinition';
-import { InjectPagesContext } from './hooks/useInjectPages';
-import { ExecutedLookupProvider } from './hooks/useExecutedLookupCallback';
-import useDynamicOptionsLoaderState from './hooks/useDynamicOptionsLoaderState';
-import { GoogleMapsApiKeyContext } from './hooks/useGoogleMapsApiKey';
-import { AbnLookupAuthenticationGuidContext } from './hooks/useAbnLookupAuthenticationGuid';
-import { CaptchaSiteKeyContext } from './hooks/useCaptchaSiteKey';
-import { FormIsReadOnlyContext } from './hooks/useFormIsReadOnly';
-import { AttachmentBlobsProvider } from './hooks/attachments/useAttachmentBlobs';
-import checkIfAttachmentsAreUploading from './services/checkIfAttachmentsAreUploading';
-import useIsOffline from './hooks/useIsOffline';
-import CustomisableButtonInner from './components/renderer/CustomisableButtonInner';
-import checkBsbsAreInvalid from './services/checkBsbsAreInvalid';
-import checkIfBsbsAreValidating from './services/checkIfBsbsAreValidating';
-import checkIfAttachmentsExist from './services/checkIfAttachmentsExist';
-function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const isOffline = useIsOffline();
-    const theme = React.useMemo(() => createMuiTheme({
-        palette: {
-            primary: {
-                main: primaryColour || '#4c8da7',
-            },
-        },
-    }), [primaryColour]);
-    //
-    //
-    // #region Form Definition
-    const pages = React.useMemo(() => {
-        if (definition.isMultiPage) {
-            return definition.elements.reduce((pageElements, formElement) => {
-                if (formElement.type === 'page') {
-                    pageElements.push(formElement);
-                }
-                return pageElements;
-            }, []);
-        }
-        else {
-            return [
-                {
-                    type: 'page',
-                    id: definition.id.toString(),
-                    label: definition.name,
-                    elements: definition.elements,
-                    conditionallyShow: false,
-                    requiresAllConditionallyShowPredicates: false,
-                },
-            ];
-        }
-    }, [
-        definition.elements,
-        definition.id,
-        definition.isMultiPage,
-        definition.name,
-    ]);
-    // #endregion
-    //
-    //
-    //
-    //
-    // #region Unsaved Changed
-    const history = useHistory();
-    const [{ isDirty, isNavigationAllowed, hasConfirmedNavigation, goToLocation }, setUnsavedChangesState,] = React.useState({
-        isDirty: false,
-        isNavigationAllowed: false,
-        hasConfirmedNavigation: null,
-        goToLocation: null,
-    });
-    const handleBlockedNavigation = React.useCallback((location) => {
-        setUnsavedChangesState((current) => ({
-            ...current,
-            goToLocation: location,
-            hasConfirmedNavigation: false,
-        }));
-        return false;
-    }, []);
-    const handleKeepGoing = React.useCallback(() => {
-        setUnsavedChangesState((current) => ({
-            ...current,
-            goToLocation: null,
-            hasConfirmedNavigation: null,
-        }));
-    }, []);
-    const handleDiscardUnsavedChanges = React.useCallback(() => {
-        setUnsavedChangesState((current) => ({
-            ...current,
-            isNavigationAllowed: true,
-            hasConfirmedNavigation: true,
-        }));
-    }, []);
-    React.useEffect(() => {
-        if (hasConfirmedNavigation) {
-            // Navigate to the previous blocked location with your navigate function
-            if (goToLocation) {
-                history.push(`${goToLocation.pathname}${goToLocation.search}`);
-            }
-            else {
-                onCancel();
-            }
-        }
-    }, [goToLocation, hasConfirmedNavigation, history, onCancel]);
-    const handleCancel = React.useCallback(() => {
-        if (isDirty) {
-            setUnsavedChangesState((current) => ({
-                ...current,
-                hasConfirmedNavigation: false,
-            }));
-        }
-        else {
-            onCancel();
-        }
-    }, [isDirty, onCancel]);
-    const allowNavigation = React.useCallback(() => {
-        setUnsavedChangesState((current) => ({
-            ...current,
-            isNavigationAllowed: true,
-        }));
-    }, []);
-    // #endregion Unsaved Changed
-    //
-    //
-    //
-    //
-    // #region Conditional Logic
-    const { formElementsConditionallyShown, conditionalLogicError } = useConditionalLogic(definition, submission);
-    // #endregion
-    //
-    //
-    //
-    //
-    // #region Validation
-    const { validate, executedLookup, executeLookupFailed } = useFormValidation(pages);
-    const formElementsValidation = React.useMemo(() => validate(submission, formElementsConditionallyShown), [formElementsConditionallyShown, submission, validate]);
-    // #endregion
-    //
-    //
-    //
-    //
-    // #region Pages
-    const { visiblePages, isFirstVisiblePage, isLastVisiblePage, isDisplayingCurrentPageError, isShowingMultiplePages, isStepsHeaderActive, toggleStepsNavigation, currentPageIndex, currentPage, currentPageNumber, checkDisplayPageError, setPageId, goToPreviousPage, goToNextPage, scrollToTopOfPageHTMLElementRef, } = usePages({
-        pages,
-        formElementsValidation,
-        formElementsConditionallyShown,
-    });
-    // #endregion
-    //
-    //
-    //
-    //
-    // #region Dynamic Options
-    const loadDynamicOptionsState = useDynamicOptionsLoaderState(definition, setFormSubmission);
-    // #endregion
-    //
-    //
-    //
-    //
-    // #region Submissions
-    const [hasAttemptedSubmit, setHasAttemptedSubmit] = React.useState(false);
-    const getCurrentSubmissionData = React.useCallback((stripBinaryData) => {
-        const { model, captchaTokens } = cleanFormSubmissionModel(submission, definition.elements, formElementsConditionallyShown, stripBinaryData);
-        return {
-            submission: model,
-            captchaTokens,
-        };
-    }, [definition.elements, formElementsConditionallyShown, submission]);
-    const obFormContainerHTMLElementRef = React.useRef(null);
-    React.useEffect(() => {
-        const obFormContainerHTMLElement = obFormContainerHTMLElementRef.current;
-        if (obFormContainerHTMLElement) {
-            console.log('Setting toast notifications to be appended to HTML Element', obFormContainerHTMLElement);
-            bulmaToast.setDefaults({
-                position: 'bottom-right',
-                opacity: 0.95,
-                appendTo: obFormContainerHTMLElement,
-            });
-        }
-        return () => {
-            bulmaToast.resetDefaults();
-        };
-    }, []);
-    const checkAttachmentsCanBeSubmitted = React.useCallback((submission) => {
-        // Prevent submission until all attachment uploads are finished
-        // Unless the user is offline, in which case, the uploads will
-        // be taken care of by a pending queue...hopefully.
-        if (isOffline) {
-            return true;
-        }
-        if (checkIfAttachmentsAreUploading(definition, submission)) {
-            bulmaToast.toast({
-                message: 'Attachments are still uploading, please wait for them to finish before trying again.',
-                // @ts-expect-error bulma sets this string as a class, so we are hacking in our own classes
-                type: 'ob-toast is-primary cypress-still-uploading-toast',
-                duration: 4000,
-                pauseOnHover: true,
-                closeOnClick: true,
-            });
-            return false;
-        }
-        return true;
-    }, [definition, isOffline]);
-    const checkBsbsCanBeSubmitted = React.useCallback((submission) => {
-        return !checkBsbsAreInvalid(definition, submission);
-    }, [definition]);
-    const checkBsbAreValidating = React.useCallback((submission) => {
-        if (checkIfBsbsAreValidating(definition, submission)) {
-            bulmaToast.toast({
-                message: 'Bsb(s) are still being validated, please wait for them to finish before trying again.',
-                // @ts-expect-error bulma sets this string as a class, so we are hacking in our own classes
-                type: 'ob-toast is-primary cypress-still-validating-toast',
-                duration: 4000,
-                pauseOnHover: true,
-                closeOnClick: true,
-            });
-            return false;
-        }
-        return true;
-    }, [definition]);
-    const handleSubmit = React.useCallback((event) => {
-        event.preventDefault();
-        if (disabled || isReadOnly)
-            return;
-        setHasAttemptedSubmit(true);
-        const submissionData = getCurrentSubmissionData(false);
-        if (!checkBsbAreValidating(submissionData.submission)) {
-            return;
-        }
-        if (formElementsValidation) {
-            console.log('Validation errors', formElementsValidation);
-            bulmaToast.toast({
-                message: 'Please fix validation errors',
-                // @ts-expect-error bulma sets this string as a class, so we are hacking in our own classes
-                type: 'ob-toast is-danger cypress-invalid-submit-attempt',
-                duration: 4000,
-                pauseOnHover: true,
-                closeOnClick: true,
-            });
-            return;
-        }
-        if (!checkAttachmentsCanBeSubmitted(submissionData.submission)) {
-            return;
-        }
-        if (!checkBsbsCanBeSubmitted(submissionData.submission)) {
-            return;
-        }
-        // check if attachments exist
-        const newSubmission = checkIfAttachmentsExist(definition, submissionData.submission, attachmentRetentionInDays);
-        if (newSubmission) {
-            setFormSubmission((currentFormSubmission) => ({
-                ...currentFormSubmission,
-                submission: newSubmission,
-            }));
-            bulmaToast.toast({
-                message: "Some files that were included in your submission have been removed based on your administrator's data retention policy, please remove them and upload them again.",
-                // @ts-expect-error bulma sets this string as a class, so we are hacking in our own classes
-                type: 'ob-toast is-danger cypress-invalid-submit-attempt',
-                duration: 4000,
-                pauseOnHover: true,
-                closeOnClick: true,
-            });
-            return;
-        }
-        allowNavigation();
-        onSubmit({
-            definition,
-            submission: submissionData.submission,
-            captchaTokens: submissionData.captchaTokens,
-        });
-    }, [
-        disabled,
-        isReadOnly,
-        getCurrentSubmissionData,
-        checkBsbAreValidating,
-        formElementsValidation,
-        checkAttachmentsCanBeSubmitted,
-        checkBsbsCanBeSubmitted,
-        definition,
-        attachmentRetentionInDays,
-        allowNavigation,
-        onSubmit,
-        setFormSubmission,
-    ]);
-    const handleSaveDraft = React.useCallback(() => {
-        if (disabled)
-            return;
-        if (onSaveDraft) {
-            allowNavigation();
-            // For drafts we don't need to save the captcha tokens,
-            // they will need to prove they are not robot again
-            const { submission } = getCurrentSubmissionData(false);
-            if (!checkBsbAreValidating(submission)) {
-                return;
-            }
-            if (!checkAttachmentsCanBeSubmitted(submission)) {
-                return;
-            }
-            onSaveDraft({
-                definition,
-                submission,
-            });
-        }
-    }, [
-        allowNavigation,
-        checkAttachmentsCanBeSubmitted,
-        definition,
-        disabled,
-        getCurrentSubmissionData,
-        onSaveDraft,
-        checkBsbAreValidating,
-    ]);
-    // #endregion
-    //
-    //
-    //
-    //
-    // #region Lookups
-    const { handlePagesLookupResult } = useLookups(definition.id, setFormSubmission);
-    // #endregion
-    //
-    //
-    //
-    //
-    // #region Submission/Definition Changes
-    const handleChange = React.useCallback((element, value) => {
-        if (disabled || element.type === 'page' || element.type === 'section') {
-            return;
-        }
-        setUnsavedChangesState((current) => ({
-            ...current,
-            isDirty: true,
-        }));
-        setFormSubmission((currentFormSubmission) => ({
-            ...currentFormSubmission,
-            submission: {
-                ...currentFormSubmission.submission,
-                [element.name]: typeof value === 'function'
-                    ? value(currentFormSubmission.submission[element.name])
-                    : value,
-            },
-        }));
-    }, [disabled, setFormSubmission]);
-    // #endregion
-    //
-    //
-    if (conditionalLogicError) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "has-text-centered" },
-                React.createElement("i", { className: "material-icons has-text-warning icon-x-large" }, "error"),
-                React.createElement("h3", { className: "title is-3" }, "Bad Form Configuration"),
-                React.createElement("p", { className: "cypress-conditional-logic-error-message" }, conditionalLogicError.message),
-                React.createElement("p", { className: "has-text-grey" }, localisationService.formatDatetimeLong(new Date())))));
-    }
-    if (loadDynamicOptionsState) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "has-text-centered" },
-                React.createElement("i", { className: "material-icons has-text-warning icon-x-large" }, "error"),
-                React.createElement("h3", { className: "title is-3" }, loadDynamicOptionsState.error.title),
-                React.createElement("p", null, loadDynamicOptionsState.error.message),
-                React.createElement("p", { className: "has-text-grey" }, localisationService.formatDatetimeLong(new Date()))),
-            React.createElement(OneBlinkAppsErrorOriginalMessage, { error: loadDynamicOptionsState.error.originalError })));
-    }
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement("div", { className: "ob-form-container", ref: obFormContainerHTMLElementRef },
-            React.createElement("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: handleSubmit },
-                React.createElement("div", null,
-                    React.createElement("div", { ref: scrollToTopOfPageHTMLElementRef }),
-                    isShowingMultiplePages && (React.createElement("div", { className: clsx('ob-steps-navigation', {
-                            'is-active': isStepsHeaderActive,
-                        }) },
-                        React.createElement("div", { className: clsx('ob-steps-navigation__header', {
-                                'is-active': isStepsHeaderActive,
-                            }), onClick: toggleStepsNavigation },
-                            React.createElement("span", { className: "icon is-invisible" },
-                                React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down")),
-                            React.createElement("div", { className: "steps-header-active-page" },
-                                isDisplayingCurrentPageError ? (React.createElement("span", { className: "icon" },
-                                    React.createElement("i", { className: "material-icons has-text-danger is-size-4" }, "warning"))) : (React.createElement("span", { className: "steps-header-active-page-icon" }, currentPageNumber)),
-                                React.createElement("span", { className: "steps-header-active-page-label cypress-tablet-step-title" }, currentPage ? currentPage.label : '')),
-                            React.createElement("span", { className: "dropdown icon" },
-                                React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down"))),
-                        React.createElement("div", { className: clsx('ob-steps-navigation__steps', {
-                                'is-active': isStepsHeaderActive,
-                            }) },
-                            React.createElement("div", { className: "steps is-small is-horizontal-tablet cypress-steps" }, visiblePages.map((page, index) => {
-                                const hasErrors = checkDisplayPageError(page);
-                                return (React.createElement("div", { key: page.id, id: `steps-navigation-step-${page.id}`, 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);
-                                        }
-                                    } },
-                                    React.createElement("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 }, hasErrors ? (React.createElement(Tooltip, { title: "Page has errors" },
-                                        React.createElement("span", { className: "icon tooltip has-tooltip-top cypress-page-error" },
-                                            React.createElement("i", { className: "material-icons has-text-danger is-size-3" }, "warning")))) : (React.createElement("span", null, index + 1))),
-                                    React.createElement("div", { className: "step-details ob-step-details" },
-                                        React.createElement("p", { className: "step-title ob-step-title cypress-desktop-step-title" }, page.label))));
-                            }))))),
-                    React.createElement("div", { className: clsx('ob-steps-navigation__background', {
-                            'is-active': isStepsHeaderActive,
-                        }), onClick: toggleStepsNavigation }),
-                    React.createElement("div", { className: "steps" },
-                        React.createElement("div", { className: clsx('steps-content', {
-                                'is-single-step': !isShowingMultiplePages,
-                            }) },
-                            React.createElement(FormDefinitionContext.Provider, { value: definition },
-                                React.createElement(InjectPagesContext.Provider, { value: handlePagesLookupResult },
-                                    React.createElement(ExecutedLookupProvider, { executedLookup: executedLookup, executeLookupFailed: executeLookupFailed },
-                                        React.createElement(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey },
-                                            React.createElement(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid },
-                                                React.createElement(CaptchaSiteKeyContext.Provider, { value: captchaSiteKey },
-                                                    React.createElement(AttachmentBlobsProvider, null,
-                                                        React.createElement(FormIsReadOnlyContext.Provider, { value: isReadOnly }, visiblePages.map((pageElement) => (React.createElement(PageFormElements, { key: pageElement.id, isActive: pageElement.id === currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
-                                                                isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission })))))))))))),
-                        isShowingMultiplePages && (React.createElement("div", { className: "steps-actions" },
-                            React.createElement("div", { className: "steps-action" },
-                                React.createElement("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous" },
-                                    React.createElement("span", { className: "icon" },
-                                        React.createElement("i", { className: "material-icons" }, "keyboard_arrow_left")),
-                                    React.createElement("span", null, "Back"))),
-                            React.createElement("div", { className: "step-progress-mobile cypress-steps-mobile" }, visiblePages.map((page, index) => (React.createElement("div", { key: page.id, 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),
-                                }) })))),
-                            React.createElement("div", { className: "steps-action" },
-                                React.createElement("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next" },
-                                    React.createElement("span", null, "Next"),
-                                    React.createElement("span", { className: "icon" },
-                                        React.createElement("i", { className: "material-icons" }, "keyboard_arrow_right"))))))),
-                    !isReadOnly && (React.createElement("div", { className: "buttons ob-buttons ob-buttons-submit" },
-                        onSaveDraft && !definition.isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: handleSaveDraft, disabled: isPreview || disabled },
-                            React.createElement(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 }))),
-                        React.createElement("span", { className: "ob-buttons-submit__spacer" }),
-                        !definition.isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled },
-                            React.createElement(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 && (React.createElement("button", { type: "submit", className: "button ob-button is-success ob-button-submit cypress-submit-form-button cypress-submit-form", disabled: isPreview || disabled },
-                            React.createElement(CustomisableButtonInner, { label: definition.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 && (React.createElement(React.Fragment, null,
-                React.createElement(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }),
-                React.createElement(Modal, { isOpen: hasConfirmedNavigation === false, title: "Unsaved Changes", cardClassName: "cypress-cancel-confirm", titleClassName: "cypress-cancel-confirm-title", bodyClassName: "cypress-cancel-confirm-body", actions: React.createElement(React.Fragment, null,
-                        onSaveDraft && (React.createElement("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: handleSaveDraft },
-                            React.createElement(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 }))),
-                        React.createElement("span", { style: { flex: 1 } }),
-                        React.createElement("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing },
-                            React.createElement(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 })),
-                        React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges },
-                            React.createElement(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 }))) },
-                    React.createElement("p", null, "You have unsaved changes, are you sure you want discard them?")))))));
-}
-export default React.memo(OneBlinkFormBase);
+import * as React from 'react';
+import { createTheme as createMuiTheme, ThemeProvider, Tooltip, } from '@mui/material';
+import { Prompt, useHistory } from 'react-router-dom';
+import clsx from 'clsx';
+import * as bulmaToast from 'bulma-toast';
+import { localisationService } from '@oneblink/apps';
+import { attachmentsService } from '@oneblink/apps';
+import Modal from './components/renderer/Modal';
+import OneBlinkAppsErrorOriginalMessage from './components/renderer/OneBlinkAppsErrorOriginalMessage';
+import cleanFormSubmissionModel from './services/cleanFormSubmissionModel';
+import PageFormElements from './components/renderer/PageFormElements';
+import useFormValidation from './hooks/useFormValidation';
+import useConditionalLogic from './hooks/useConditionalLogic';
+import usePages from './hooks/usePages';
+import useLookups from './hooks/useLookups';
+import { FormDefinitionContext } from './hooks/useFormDefinition';
+import { InjectPagesContext } from './hooks/useInjectPages';
+import { ExecutedLookupProvider } from './hooks/useExecutedLookupCallback';
+import useDynamicOptionsLoaderState from './hooks/useDynamicOptionsLoaderState';
+import { GoogleMapsApiKeyContext } from './hooks/useGoogleMapsApiKey';
+import { AbnLookupAuthenticationGuidContext } from './hooks/useAbnLookupAuthenticationGuid';
+import { CaptchaSiteKeyContext } from './hooks/useCaptchaSiteKey';
+import { FormIsReadOnlyContext } from './hooks/useFormIsReadOnly';
+import { AttachmentBlobsProvider } from './hooks/attachments/useAttachmentBlobs';
+import useIsOffline from './hooks/useIsOffline';
+import CustomisableButtonInner from './components/renderer/CustomisableButtonInner';
+import checkBsbsAreInvalid from './services/checkBsbsAreInvalid';
+import checkIfBsbsAreValidating from './services/checkIfBsbsAreValidating';
+import checkIfAttachmentsExist from './services/checkIfAttachmentsExist';
+function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, continueWithUploadingAttachments, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const isOffline = useIsOffline();
+    const theme = React.useMemo(() => createMuiTheme({
+        palette: {
+            primary: {
+                main: primaryColour || '#4c8da7',
+            },
+            success: {
+                main: '#4caf50',
+            },
+        },
+    }), [primaryColour]);
+    //
+    //
+    // #region Form Definition
+    const pages = React.useMemo(() => {
+        if (definition.isMultiPage) {
+            return definition.elements.reduce((pageElements, formElement) => {
+                if (formElement.type === 'page') {
+                    pageElements.push(formElement);
+                }
+                return pageElements;
+            }, []);
+        }
+        else {
+            return [
+                {
+                    type: 'page',
+                    id: definition.id.toString(),
+                    label: definition.name,
+                    elements: definition.elements,
+                    conditionallyShow: false,
+                    requiresAllConditionallyShowPredicates: false,
+                },
+            ];
+        }
+    }, [
+        definition.elements,
+        definition.id,
+        definition.isMultiPage,
+        definition.name,
+    ]);
+    // #endregion
+    //
+    //
+    //
+    //
+    // #region Unsaved Changed
+    const history = useHistory();
+    const [{ isDirty, isNavigationAllowed, hasConfirmedNavigation, goToLocation }, setUnsavedChangesState,] = React.useState({
+        isDirty: false,
+        isNavigationAllowed: false,
+        hasConfirmedNavigation: null,
+        goToLocation: null,
+    });
+    const handleBlockedNavigation = React.useCallback((location) => {
+        setUnsavedChangesState((current) => ({
+            ...current,
+            goToLocation: location,
+            hasConfirmedNavigation: false,
+        }));
+        return false;
+    }, []);
+    const handleKeepGoing = React.useCallback(() => {
+        setUnsavedChangesState((current) => ({
+            ...current,
+            goToLocation: null,
+            hasConfirmedNavigation: null,
+        }));
+    }, []);
+    const handleDiscardUnsavedChanges = React.useCallback(() => {
+        setUnsavedChangesState((current) => ({
+            ...current,
+            isNavigationAllowed: true,
+            hasConfirmedNavigation: true,
+        }));
+    }, []);
+    React.useEffect(() => {
+        if (hasConfirmedNavigation) {
+            // Navigate to the previous blocked location with your navigate function
+            if (goToLocation) {
+                history.push(`${goToLocation.pathname}${goToLocation.search}`);
+            }
+            else {
+                onCancel();
+            }
+        }
+    }, [goToLocation, hasConfirmedNavigation, history, onCancel]);
+    const handleCancel = React.useCallback(() => {
+        if (isDirty) {
+            setUnsavedChangesState((current) => ({
+                ...current,
+                hasConfirmedNavigation: false,
+            }));
+        }
+        else {
+            onCancel();
+        }
+    }, [isDirty, onCancel]);
+    const allowNavigation = React.useCallback(() => {
+        setUnsavedChangesState((current) => ({
+            ...current,
+            isNavigationAllowed: true,
+        }));
+    }, []);
+    // #endregion Unsaved Changed
+    //
+    //
+    //
+    //
+    // #region Conditional Logic
+    const { formElementsConditionallyShown, conditionalLogicError } = useConditionalLogic(definition, submission);
+    // #endregion
+    //
+    //
+    //
+    //
+    // #region Validation
+    const { validate, executedLookup, executeLookupFailed } = useFormValidation(pages);
+    const formElementsValidation = React.useMemo(() => validate(submission, formElementsConditionallyShown), [formElementsConditionallyShown, submission, validate]);
+    // #endregion
+    //
+    //
+    //
+    //
+    // #region Pages
+    const { visiblePages, isFirstVisiblePage, isLastVisiblePage, isDisplayingCurrentPageError, isShowingMultiplePages, isStepsHeaderActive, toggleStepsNavigation, currentPageIndex, currentPage, currentPageNumber, checkDisplayPageError, setPageId, goToPreviousPage, goToNextPage, scrollToTopOfPageHTMLElementRef, } = usePages({
+        pages,
+        formElementsValidation,
+        formElementsConditionallyShown,
+    });
+    // #endregion
+    //
+    //
+    //
+    //
+    // #region Dynamic Options
+    const loadDynamicOptionsState = useDynamicOptionsLoaderState(definition, setFormSubmission);
+    // #endregion
+    //
+    //
+    //
+    //
+    // #region Submissions
+    const [hasAttemptedSubmit, setHasAttemptedSubmit] = React.useState(false);
+    const getCurrentSubmissionData = React.useCallback((stripBinaryData) => {
+        const { model, captchaTokens } = cleanFormSubmissionModel(submission, definition.elements, formElementsConditionallyShown, stripBinaryData);
+        return {
+            submission: model,
+            captchaTokens,
+        };
+    }, [definition.elements, formElementsConditionallyShown, submission]);
+    const obFormContainerHTMLElementRef = React.useRef(null);
+    React.useEffect(() => {
+        const obFormContainerHTMLElement = obFormContainerHTMLElementRef.current;
+        if (obFormContainerHTMLElement) {
+            console.log('Setting toast notifications to be appended to HTML Element', obFormContainerHTMLElement);
+            bulmaToast.setDefaults({
+                position: 'bottom-right',
+                opacity: 0.95,
+                appendTo: obFormContainerHTMLElement,
+            });
+        }
+        return () => {
+            bulmaToast.resetDefaults();
+        };
+    }, []);
+    const checkAttachmentsCanBeSubmitted = React.useCallback((submission) => {
+        // Prevent submission until all attachment uploads are finished
+        // Unless the user is offline, in which case, the uploads will
+        // be taken care of by a pending queue...hopefully.
+        if (isOffline) {
+            return true;
+        }
+        // consumer has signaled to continue with submission whilst attachments still uploading
+        if (continueWithUploadingAttachments) {
+            return true;
+        }
+        if (attachmentsService.checkIfAttachmentsAreUploading(definition, submission)) {
+            bulmaToast.toast({
+                message: 'Attachments are still uploading, please wait for them to finish before trying again.',
+                // @ts-expect-error bulma sets this string as a class, so we are hacking in our own classes
+                type: 'ob-toast is-primary cypress-still-uploading-toast',
+                duration: 4000,
+                pauseOnHover: true,
+                closeOnClick: true,
+            });
+            return false;
+        }
+        return true;
+    }, [definition, isOffline, continueWithUploadingAttachments]);
+    const checkBsbsCanBeSubmitted = React.useCallback((submission) => {
+        return !checkBsbsAreInvalid(definition, submission);
+    }, [definition]);
+    const checkBsbAreValidating = React.useCallback((submission) => {
+        if (checkIfBsbsAreValidating(definition, submission)) {
+            bulmaToast.toast({
+                message: 'Bsb(s) are still being validated, please wait for them to finish before trying again.',
+                // @ts-expect-error bulma sets this string as a class, so we are hacking in our own classes
+                type: 'ob-toast is-primary cypress-still-validating-toast',
+                duration: 4000,
+                pauseOnHover: true,
+                closeOnClick: true,
+            });
+            return false;
+        }
+        return true;
+    }, [definition]);
+    const handleSubmit = React.useCallback((event) => {
+        event.preventDefault();
+        if (disabled || isReadOnly)
+            return;
+        setHasAttemptedSubmit(true);
+        const submissionData = getCurrentSubmissionData(false);
+        if (!checkBsbAreValidating(submissionData.submission)) {
+            return;
+        }
+        if (formElementsValidation) {
+            console.log('Validation errors', formElementsValidation);
+            bulmaToast.toast({
+                message: 'Please fix validation errors',
+                // @ts-expect-error bulma sets this string as a class, so we are hacking in our own classes
+                type: 'ob-toast is-danger cypress-invalid-submit-attempt',
+                duration: 4000,
+                pauseOnHover: true,
+                closeOnClick: true,
+            });
+            return;
+        }
+        if (!checkAttachmentsCanBeSubmitted(submissionData.submission)) {
+            return;
+        }
+        if (!checkBsbsCanBeSubmitted(submissionData.submission)) {
+            return;
+        }
+        // check if attachments exist
+        const newSubmission = checkIfAttachmentsExist(definition, submissionData.submission, attachmentRetentionInDays);
+        if (newSubmission) {
+            setFormSubmission((currentFormSubmission) => ({
+                ...currentFormSubmission,
+                submission: newSubmission,
+            }));
+            bulmaToast.toast({
+                message: "Some files that were included in your submission have been removed based on your administrator's data retention policy, please remove them and upload them again.",
+                // @ts-expect-error bulma sets this string as a class, so we are hacking in our own classes
+                type: 'ob-toast is-danger cypress-invalid-submit-attempt',
+                duration: 4000,
+                pauseOnHover: true,
+                closeOnClick: true,
+            });
+            return;
+        }
+        allowNavigation();
+        onSubmit({
+            definition,
+            submission: submissionData.submission,
+            captchaTokens: submissionData.captchaTokens,
+        });
+    }, [
+        disabled,
+        isReadOnly,
+        getCurrentSubmissionData,
+        checkBsbAreValidating,
+        formElementsValidation,
+        checkAttachmentsCanBeSubmitted,
+        checkBsbsCanBeSubmitted,
+        definition,
+        attachmentRetentionInDays,
+        allowNavigation,
+        onSubmit,
+        setFormSubmission,
+    ]);
+    const handleSaveDraft = React.useCallback(() => {
+        if (disabled)
+            return;
+        if (onSaveDraft) {
+            allowNavigation();
+            // For drafts we don't need to save the captcha tokens,
+            // they will need to prove they are not robot again
+            const { submission } = getCurrentSubmissionData(false);
+            if (!checkBsbAreValidating(submission)) {
+                return;
+            }
+            if (!checkAttachmentsCanBeSubmitted(submission)) {
+                return;
+            }
+            onSaveDraft({
+                definition,
+                submission,
+            });
+        }
+    }, [
+        allowNavigation,
+        checkAttachmentsCanBeSubmitted,
+        definition,
+        disabled,
+        getCurrentSubmissionData,
+        onSaveDraft,
+        checkBsbAreValidating,
+    ]);
+    // #endregion
+    //
+    //
+    //
+    //
+    // #region Lookups
+    const { handlePagesLookupResult } = useLookups(definition.id, setFormSubmission);
+    // #endregion
+    //
+    //
+    //
+    //
+    // #region Submission/Definition Changes
+    const handleChange = React.useCallback((element, value) => {
+        if (disabled || element.type === 'page' || element.type === 'section') {
+            return;
+        }
+        setUnsavedChangesState((current) => ({
+            ...current,
+            isDirty: true,
+        }));
+        setFormSubmission((currentFormSubmission) => ({
+            ...currentFormSubmission,
+            submission: {
+                ...currentFormSubmission.submission,
+                [element.name]: typeof value === 'function'
+                    ? value(currentFormSubmission.submission[element.name])
+                    : value,
+            },
+        }));
+    }, [disabled, setFormSubmission]);
+    // #endregion
+    //
+    //
+    if (conditionalLogicError) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "has-text-centered" },
+                React.createElement("i", { className: "material-icons has-text-warning icon-x-large" }, "error"),
+                React.createElement("h3", { className: "title is-3" }, "Bad Form Configuration"),
+                React.createElement("p", { className: "cypress-conditional-logic-error-message" }, conditionalLogicError.message),
+                React.createElement("p", { className: "has-text-grey" }, localisationService.formatDatetimeLong(new Date())))));
+    }
+    if (loadDynamicOptionsState) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "has-text-centered" },
+                React.createElement("i", { className: "material-icons has-text-warning icon-x-large" }, "error"),
+                React.createElement("h3", { className: "title is-3" }, loadDynamicOptionsState.error.title),
+                React.createElement("p", null, loadDynamicOptionsState.error.message),
+                React.createElement("p", { className: "has-text-grey" }, localisationService.formatDatetimeLong(new Date()))),
+            React.createElement(OneBlinkAppsErrorOriginalMessage, { error: loadDynamicOptionsState.error.originalError })));
+    }
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement("div", { className: "ob-form-container", ref: obFormContainerHTMLElementRef },
+            React.createElement("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: handleSubmit },
+                React.createElement("div", null,
+                    React.createElement("div", { ref: scrollToTopOfPageHTMLElementRef }),
+                    isShowingMultiplePages && (React.createElement("div", { className: clsx('ob-steps-navigation', {
+                            'is-active': isStepsHeaderActive,
+                        }) },
+                        React.createElement("div", { className: clsx('ob-steps-navigation__header', {
+                                'is-active': isStepsHeaderActive,
+                            }), onClick: toggleStepsNavigation },
+                            React.createElement("span", { className: "icon is-invisible" },
+                                React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down")),
+                            React.createElement("div", { className: "steps-header-active-page" },
+                                isDisplayingCurrentPageError ? (React.createElement("span", { className: "icon" },
+                                    React.createElement("i", { className: "material-icons has-text-danger is-size-4" }, "warning"))) : (React.createElement("span", { className: "steps-header-active-page-icon" }, currentPageNumber)),
+                                React.createElement("span", { className: "steps-header-active-page-label cypress-tablet-step-title" }, currentPage ? currentPage.label : '')),
+                            React.createElement("span", { className: "dropdown icon" },
+                                React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down"))),
+                        React.createElement("div", { className: clsx('ob-steps-navigation__steps', {
+                                'is-active': isStepsHeaderActive,
+                            }) },
+                            React.createElement("div", { className: "steps is-small is-horizontal-tablet cypress-steps" }, visiblePages.map((page, index) => {
+                                const hasErrors = checkDisplayPageError(page);
+                                return (React.createElement("div", { key: page.id, id: `steps-navigation-step-${page.id}`, 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);
+                                        }
+                                    } },
+                                    React.createElement("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 }, hasErrors ? (React.createElement(Tooltip, { title: "Page has errors" },
+                                        React.createElement("span", { className: "icon tooltip has-tooltip-top cypress-page-error" },
+                                            React.createElement("i", { className: "material-icons has-text-danger is-size-3" }, "warning")))) : (React.createElement("span", null, index + 1))),
+                                    React.createElement("div", { className: "step-details ob-step-details" },
+                                        React.createElement("p", { className: "step-title ob-step-title cypress-desktop-step-title" }, page.label))));
+                            }))))),
+                    React.createElement("div", { className: clsx('ob-steps-navigation__background', {
+                            'is-active': isStepsHeaderActive,
+                        }), onClick: toggleStepsNavigation }),
+                    React.createElement("div", { className: "steps" },
+                        React.createElement("div", { className: clsx('steps-content', {
+                                'is-single-step': !isShowingMultiplePages,
+                            }) },
+                            React.createElement(FormDefinitionContext.Provider, { value: definition },
+                                React.createElement(InjectPagesContext.Provider, { value: handlePagesLookupResult },
+                                    React.createElement(ExecutedLookupProvider, { executedLookup: executedLookup, executeLookupFailed: executeLookupFailed },
+                                        React.createElement(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey },
+                                            React.createElement(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid },
+                                                React.createElement(CaptchaSiteKeyContext.Provider, { value: captchaSiteKey },
+                                                    React.createElement(AttachmentBlobsProvider, null,
+                                                        React.createElement(FormIsReadOnlyContext.Provider, { value: isReadOnly }, visiblePages.map((pageElement) => (React.createElement(PageFormElements, { key: pageElement.id, isActive: pageElement.id === currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
+                                                                isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission })))))))))))),
+                        isShowingMultiplePages && (React.createElement("div", { className: "steps-actions" },
+                            React.createElement("div", { className: "steps-action" },
+                                React.createElement("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous" },
+                                    React.createElement("span", { className: "icon" },
+                                        React.createElement("i", { className: "material-icons" }, "keyboard_arrow_left")),
+                                    React.createElement("span", null, "Back"))),
+                            React.createElement("div", { className: "step-progress-mobile cypress-steps-mobile" }, visiblePages.map((page, index) => (React.createElement("div", { key: page.id, 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),
+                                }) })))),
+                            React.createElement("div", { className: "steps-action" },
+                                React.createElement("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next" },
+                                    React.createElement("span", null, "Next"),
+                                    React.createElement("span", { className: "icon" },
+                                        React.createElement("i", { className: "material-icons" }, "keyboard_arrow_right"))))))),
+                    !isReadOnly && (React.createElement("div", { className: "buttons ob-buttons ob-buttons-submit" },
+                        onSaveDraft && !definition.isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: handleSaveDraft, disabled: isPreview || disabled },
+                            React.createElement(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 }))),
+                        React.createElement("span", { className: "ob-buttons-submit__spacer" }),
+                        !definition.isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled },
+                            React.createElement(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 && (React.createElement("button", { type: "submit", className: "button ob-button is-success ob-button-submit cypress-submit-form-button cypress-submit-form", disabled: isPreview || disabled },
+                            React.createElement(CustomisableButtonInner, { label: definition.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 && (React.createElement(React.Fragment, null,
+                React.createElement(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }),
+                React.createElement(Modal, { isOpen: hasConfirmedNavigation === false, title: "Unsaved Changes", cardClassName: "cypress-cancel-confirm", titleClassName: "cypress-cancel-confirm-title", bodyClassName: "cypress-cancel-confirm-body", actions: React.createElement(React.Fragment, null,
+                        onSaveDraft && (React.createElement("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: handleSaveDraft },
+                            React.createElement(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 }))),
+                        React.createElement("span", { style: { flex: 1 } }),
+                        React.createElement("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing },
+                            React.createElement(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 })),
+                        React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges },
+                            React.createElement(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 }))) },
+                    React.createElement("p", null, "You have unsaved changes, are you sure you want discard them?")))))));
+}
+export default React.memo(OneBlinkFormBase);
 //# sourceMappingURL=OneBlinkFormBase.js.map