@oneblink/apps-react 4.2.0-beta.4 → 4.3.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/OneBlinkFormBase.js +121 -134
  2. package/dist/OneBlinkFormBase.js.map +1 -1
  3. package/dist/components/CustomAccordion.d.ts +1 -1
  4. package/dist/components/Lists.d.ts +2 -2
  5. package/dist/components/renderer/AutocompleteDropdown.js +3 -1
  6. package/dist/components/renderer/AutocompleteDropdown.js.map +1 -1
  7. package/dist/components/renderer/OneBlinkFormElements.d.ts +3 -2
  8. package/dist/components/renderer/OneBlinkFormElements.js +13 -13
  9. package/dist/components/renderer/OneBlinkFormElements.js.map +1 -1
  10. package/dist/components/renderer/PageFormElements.js +29 -1
  11. package/dist/components/renderer/PageFormElements.js.map +1 -1
  12. package/dist/form-elements/FormElementAutocomplete.d.ts +2 -1
  13. package/dist/form-elements/FormElementAutocomplete.js +2 -1
  14. package/dist/form-elements/FormElementAutocomplete.js.map +1 -1
  15. package/dist/form-elements/FormElementCheckBoxes.d.ts +3 -2
  16. package/dist/form-elements/FormElementCheckBoxes.js +2 -1
  17. package/dist/form-elements/FormElementCheckBoxes.js.map +1 -1
  18. package/dist/form-elements/FormElementCompliance.d.ts +3 -2
  19. package/dist/form-elements/FormElementCompliance.js +2 -1
  20. package/dist/form-elements/FormElementCompliance.js.map +1 -1
  21. package/dist/form-elements/FormElementForm.d.ts +3 -2
  22. package/dist/form-elements/FormElementForm.js +17 -2
  23. package/dist/form-elements/FormElementForm.js.map +1 -1
  24. package/dist/form-elements/FormElementRadio.d.ts +3 -2
  25. package/dist/form-elements/FormElementRadio.js +2 -1
  26. package/dist/form-elements/FormElementRadio.js.map +1 -1
  27. package/dist/form-elements/FormElementRepeatableSet.d.ts +3 -2
  28. package/dist/form-elements/FormElementRepeatableSet.js +18 -4
  29. package/dist/form-elements/FormElementRepeatableSet.js.map +1 -1
  30. package/dist/form-elements/FormElementSection.d.ts +1 -1
  31. package/dist/form-elements/FormElementSection.js +16 -2
  32. package/dist/form-elements/FormElementSection.js.map +1 -1
  33. package/dist/form-elements/FormElementSelect.d.ts +3 -2
  34. package/dist/form-elements/FormElementSelect.js +2 -1
  35. package/dist/form-elements/FormElementSelect.js.map +1 -1
  36. package/dist/hooks/useDynamicOptionsLoaderState.d.ts +16 -7
  37. package/dist/hooks/useDynamicOptionsLoaderState.js +195 -45
  38. package/dist/hooks/useDynamicOptionsLoaderState.js.map +1 -1
  39. package/dist/hooks/useFormElementOptions.d.ts +3 -2
  40. package/dist/hooks/useFormElementOptions.js +3 -1
  41. package/dist/hooks/useFormElementOptions.js.map +1 -1
  42. package/dist/services/form-validation.js +1 -1
  43. package/dist/services/form-validation.js.map +1 -1
  44. package/dist/types/form.d.ts +1 -0
  45. package/dist/types/form.js.map +1 -1
  46. package/package.json +2 -2
@@ -6,7 +6,6 @@ import * as bulmaToast from 'bulma-toast';
6
6
  import { localisationService } from '@oneblink/apps';
7
7
  import { attachmentsService } from '@oneblink/apps';
8
8
  import Modal from './components/renderer/Modal';
9
- import OneBlinkAppsErrorOriginalMessage from './components/renderer/OneBlinkAppsErrorOriginalMessage';
10
9
  import cleanFormSubmissionModel from './services/cleanFormSubmissionModel';
11
10
  import PageFormElements from './components/renderer/PageFormElements';
12
11
  import useFormValidation from './hooks/useFormValidation';
@@ -16,7 +15,7 @@ import useLookups from './hooks/useLookups';
16
15
  import { FormDefinitionContext } from './hooks/useFormDefinition';
17
16
  import { InjectPagesContext } from './hooks/useInjectPages';
18
17
  import { ExecutedLookupProvider } from './hooks/useExecutedLookupCallback';
19
- import useDynamicOptionsLoaderState from './hooks/useDynamicOptionsLoaderState';
18
+ import { FormElementOptionsContextProvider } from './hooks/useDynamicOptionsLoaderState';
20
19
  import { GoogleMapsApiKeyContext } from './hooks/useGoogleMapsApiKey';
21
20
  import { AbnLookupAuthenticationGuidContext } from './hooks/useAbnLookupAuthenticationGuid';
22
21
  import { CaptchaSiteKeyContext } from './hooks/useCaptchaSiteKey';
@@ -188,13 +187,6 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
188
187
  //
189
188
  //
190
189
  //
191
- // #region Dynamic Options
192
- const loadDynamicOptionsState = useDynamicOptionsLoaderState(definition, setFormSubmission);
193
- // #endregion
194
- //
195
- //
196
- //
197
- //
198
190
  // #region Submissions
199
191
  const getCurrentSubmissionData = React.useCallback((stripBinaryData) => {
200
192
  const { model, captchaTokens } = cleanFormSubmissionModel(submission, definition.elements, formElementsConditionallyShown, stripBinaryData);
@@ -482,132 +474,127 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
482
474
  React.createElement("p", { className: "cypress-conditional-logic-error-message" }, conditionalLogicError.message),
483
475
  React.createElement("p", { className: "has-text-grey" }, localisationService.formatDatetimeLong(new Date())))));
484
476
  }
485
- if (loadDynamicOptionsState) {
486
- return (React.createElement(React.Fragment, null,
487
- React.createElement("div", { className: "has-text-centered" },
488
- React.createElement("i", { className: "material-icons has-text-warning icon-x-large" }, "error"),
489
- React.createElement("h3", { className: "title is-3" }, loadDynamicOptionsState.error.title),
490
- React.createElement("p", null, loadDynamicOptionsState.error.message),
491
- React.createElement("p", { className: "has-text-grey" }, localisationService.formatDatetimeLong(new Date()))),
492
- React.createElement(OneBlinkAppsErrorOriginalMessage, { error: loadDynamicOptionsState.error.originalError })));
493
- }
494
477
  return (React.createElement(ThemeProvider, { theme: theme },
495
- React.createElement("div", { className: "ob-form-container", ref: obFormContainerHTMLElementRef },
496
- React.createElement("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: (e) => handleSubmit(e, false) },
497
- React.createElement("div", null,
498
- React.createElement("div", { ref: scrollToTopOfPageHTMLElementRef }),
499
- isShowingMultiplePages && (React.createElement("div", { className: clsx('ob-steps-navigation', {
500
- 'is-active': isStepsHeaderActive,
501
- }) },
502
- React.createElement("div", { className: clsx('ob-steps-navigation__header', {
503
- 'is-active': isStepsHeaderActive,
504
- }), onClick: toggleStepsNavigation },
505
- React.createElement("span", { className: "icon is-invisible" },
506
- React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down")),
507
- React.createElement("div", { className: "steps-header-active-page" },
508
- isDisplayingCurrentPageError ? (React.createElement("span", { className: "icon" },
509
- React.createElement("i", { className: "material-icons has-text-danger is-size-4" }, "warning"))) : (React.createElement("span", { className: "steps-header-active-page-icon" }, currentPageNumber)),
510
- React.createElement("span", { className: "steps-header-active-page-label cypress-tablet-step-title" }, currentPage ? currentPage.label : '')),
511
- React.createElement("span", { className: "dropdown icon" },
512
- React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down"))),
513
- React.createElement("div", { className: clsx('ob-steps-navigation__steps', {
514
- 'is-active': isStepsHeaderActive,
515
- }) },
516
- React.createElement("div", { className: "steps is-small is-horizontal-tablet cypress-steps" }, visiblePages.map((page, index) => {
517
- const hasErrors = checkDisplayPageError(page);
518
- return (React.createElement("div", { key: page.id, id: `steps-navigation-step-${page.id}`, className: clsx('step-item cypress-step-item', {
519
- 'is-active': currentPage.id === page.id,
520
- 'is-completed': currentPageIndex > index,
521
- 'is-error': hasErrors,
522
- }), onClick: (e) => {
523
- e.stopPropagation();
524
- if (page.id !== currentPage.id) {
525
- setPageId(page.id);
526
- }
527
- } },
528
- React.createElement("div", { className: "step-marker step-marker-error ob-step-marker cypress-step-marker",
529
- // @ts-expect-error ???
530
- name: `cypress-page-stepper-${index + 1}`, value: index + 1 }, hasErrors ? (React.createElement(Tooltip, { title: "Page has errors" },
531
- React.createElement("span", { className: "icon tooltip has-tooltip-top cypress-page-error" },
532
- React.createElement("i", { className: "material-icons has-text-danger is-size-3" }, "warning")))) : (React.createElement("span", null, index + 1))),
533
- React.createElement("div", { className: "step-details ob-step-details" },
534
- React.createElement("p", { className: "step-title ob-step-title cypress-desktop-step-title" }, page.label))));
535
- }))))),
536
- React.createElement("div", { className: clsx('ob-steps-navigation__background', {
537
- 'is-active': isStepsHeaderActive,
538
- }), onClick: toggleStepsNavigation }),
539
- React.createElement("div", { className: "steps" },
540
- React.createElement("div", { className: clsx('steps-content', {
541
- 'is-single-step': !isShowingMultiplePages,
542
- }) },
543
- React.createElement(FormDefinitionContext.Provider, { value: definition },
544
- React.createElement(InjectPagesContext.Provider, { value: handlePagesLookupResult },
545
- React.createElement(ExecutedLookupProvider, { executedLookup: executedLookup, executeLookupFailed: executeLookupFailed },
546
- React.createElement(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey },
547
- React.createElement(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid },
548
- React.createElement(CaptchaSiteKeyContext.Provider, { value: captchaSiteKey },
549
- React.createElement(AttachmentBlobsProvider, null,
550
- 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 ||
551
- isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission })))))))))))),
552
- isShowingMultiplePages && (React.createElement("div", { className: "steps-actions" },
553
- React.createElement("div", { className: "steps-action" },
554
- React.createElement("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous" },
555
- React.createElement("span", { className: "icon" },
556
- React.createElement("i", { className: "material-icons" }, "keyboard_arrow_left")),
557
- React.createElement("span", null, "Back"))),
558
- 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', {
559
- 'is-active': currentPage.id === page.id,
560
- 'is-completed': currentPageIndex > index,
561
- 'has-background-danger': currentPage.id !== page.id &&
562
- checkDisplayPageError(page),
563
- }) })))),
564
- React.createElement("div", { className: "steps-action" },
565
- React.createElement("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next" },
566
- React.createElement("span", null, "Next"),
567
- React.createElement("span", { className: "icon" },
568
- React.createElement("i", { className: "material-icons" }, "keyboard_arrow_right"))))))),
569
- !isReadOnly && (React.createElement("div", { className: "buttons ob-buttons ob-buttons-submit" },
570
- onSaveDraft && !isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: () => handleSaveDraft(false), disabled: isPreview || disabled },
571
- 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 }))),
572
- React.createElement("span", { className: "ob-buttons-submit__spacer" }),
573
- !isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled },
574
- 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 }))),
575
- 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 },
576
- React.createElement(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 }))))))),
577
- !isReadOnly && (React.createElement(React.Fragment, null,
578
- React.createElement(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }),
579
- 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,
580
- onSaveDraft && (React.createElement("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: () => handleSaveDraft(false) },
581
- 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 }))),
582
- React.createElement("span", { style: { flex: 1 } }),
583
- React.createElement("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing },
584
- 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 })),
585
- React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges },
586
- 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 }))) },
587
- React.createElement("p", null, "You have unsaved changes, are you sure you want discard them?")),
588
- React.createElement(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: React.createElement(React.Fragment, null,
589
- React.createElement("span", { style: { flex: 1 } }),
590
- React.createElement("button", { type: "button", className: "button ob-button is-light cypress-attachments-confirm-wait", onClick: handleWaitForAttachments }, "Wait"),
591
- React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-attachments-confirm-continue", onClick: handleContinueWithAttachments }, "Continue")) },
592
- React.createElement("p", null, "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.")),
593
- React.createElement(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: React.createElement(React.Fragment, null,
594
- onSaveDraft && (React.createElement("button", { type: "button", className: "button ob-button ob-button__offline-submission-attempt-save-draft is-success", onClick: () => handleSaveDraft(false) },
595
- React.createElement(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 }))),
596
- React.createElement("span", { style: { flex: 1 } }),
597
- React.createElement("button", { className: "button ob-button ob-button__offline-submission-attempt-cancel is-light", onClick: () => setPromptOfflineSubmissionAttempt(false) }, "Cancel"),
598
- React.createElement("button", { className: "button ob-button ob-button__offline-submission-attempt-try-again is-primary", onClick: (e) => {
599
- setPromptOfflineSubmissionAttempt(false);
600
- handleSubmit(e, false);
601
- } }, "Try Again")) },
602
- React.createElement("p", { className: "ob-modal__offline-submission-attempt-message" },
603
- "You cannot submit this form while offline, please try again when connectivity is restored.",
604
- onSaveDraft && (React.createElement("span", { className: "ob-modal__offline-submission-attempt-save-draft-message" },
605
- ' ',
606
- "Alternatively, click the",
607
- ' ',
608
- React.createElement("b", null, ((_q = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _q === void 0 ? void 0 : _q.label) || 'Save Draft'),
609
- " button below to come back to this later."))),
610
- React.createElement("i", { className: "material-icons has-text-warning icon-x-large ob-modal__offline-submission-attempt-icon" }, "wifi_off")))))));
478
+ React.createElement(FormDefinitionContext.Provider, { value: definition },
479
+ React.createElement(FormElementOptionsContextProvider, null,
480
+ React.createElement("div", { className: "ob-form-container", ref: obFormContainerHTMLElementRef },
481
+ React.createElement("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: (e) => handleSubmit(e, false) },
482
+ React.createElement("div", null,
483
+ React.createElement("div", { ref: scrollToTopOfPageHTMLElementRef }),
484
+ isShowingMultiplePages && (React.createElement("div", { className: clsx('ob-steps-navigation', {
485
+ 'is-active': isStepsHeaderActive,
486
+ }) },
487
+ React.createElement("div", { className: clsx('ob-steps-navigation__header', {
488
+ 'is-active': isStepsHeaderActive,
489
+ }), onClick: toggleStepsNavigation },
490
+ React.createElement("span", { className: "icon is-invisible" },
491
+ React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down")),
492
+ React.createElement("div", { className: "steps-header-active-page" },
493
+ isDisplayingCurrentPageError ? (React.createElement("span", { className: "icon" },
494
+ React.createElement("i", { className: "material-icons has-text-danger is-size-4" }, "warning"))) : (React.createElement("span", { className: "steps-header-active-page-icon" }, currentPageNumber)),
495
+ React.createElement("span", { className: "steps-header-active-page-label cypress-tablet-step-title" }, currentPage ? currentPage.label : '')),
496
+ React.createElement("span", { className: "dropdown icon" },
497
+ React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down"))),
498
+ React.createElement("div", { className: clsx('ob-steps-navigation__steps', {
499
+ 'is-active': isStepsHeaderActive,
500
+ }) },
501
+ React.createElement("div", { className: "steps is-small is-horizontal-tablet cypress-steps" }, visiblePages.map((page, index) => {
502
+ const hasErrors = checkDisplayPageError(page);
503
+ return (React.createElement("div", { key: page.id, id: `steps-navigation-step-${page.id}`, className: clsx('step-item cypress-step-item', {
504
+ 'is-active': currentPage.id === page.id,
505
+ 'is-completed': currentPageIndex > index,
506
+ 'is-error': hasErrors,
507
+ }), onClick: (e) => {
508
+ e.stopPropagation();
509
+ if (page.id !== currentPage.id) {
510
+ setPageId(page.id);
511
+ }
512
+ } },
513
+ React.createElement("div", { className: "step-marker step-marker-error ob-step-marker cypress-step-marker",
514
+ // @ts-expect-error ???
515
+ name: `cypress-page-stepper-${index + 1}`, value: index + 1 }, hasErrors ? (React.createElement(Tooltip, { title: "Page has errors" },
516
+ React.createElement("span", { className: "icon tooltip has-tooltip-top cypress-page-error" },
517
+ React.createElement("i", { className: "material-icons has-text-danger is-size-3" }, "warning")))) : (React.createElement("span", null, index + 1))),
518
+ React.createElement("div", { className: "step-details ob-step-details" },
519
+ React.createElement("p", { className: "step-title ob-step-title cypress-desktop-step-title" }, page.label))));
520
+ }))))),
521
+ React.createElement("div", { className: clsx('ob-steps-navigation__background', {
522
+ 'is-active': isStepsHeaderActive,
523
+ }), onClick: toggleStepsNavigation }),
524
+ React.createElement("div", { className: "steps" },
525
+ React.createElement("div", { className: clsx('steps-content', {
526
+ 'is-single-step': !isShowingMultiplePages,
527
+ }) },
528
+ React.createElement(InjectPagesContext.Provider, { value: handlePagesLookupResult },
529
+ React.createElement(ExecutedLookupProvider, { executedLookup: executedLookup, executeLookupFailed: executeLookupFailed },
530
+ React.createElement(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey },
531
+ React.createElement(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid },
532
+ React.createElement(CaptchaSiteKeyContext.Provider, { value: captchaSiteKey },
533
+ React.createElement(AttachmentBlobsProvider, null,
534
+ 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 ||
535
+ isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission }))))))))))),
536
+ isShowingMultiplePages && (React.createElement("div", { className: "steps-actions" },
537
+ React.createElement("div", { className: "steps-action" },
538
+ React.createElement("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous" },
539
+ React.createElement("span", { className: "icon" },
540
+ React.createElement("i", { className: "material-icons" }, "keyboard_arrow_left")),
541
+ React.createElement("span", null, "Back"))),
542
+ 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', {
543
+ 'is-active': currentPage.id === page.id,
544
+ 'is-completed': currentPageIndex > index,
545
+ 'has-background-danger': currentPage.id !== page.id &&
546
+ checkDisplayPageError(page),
547
+ }) })))),
548
+ React.createElement("div", { className: "steps-action" },
549
+ React.createElement("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next" },
550
+ React.createElement("span", null, "Next"),
551
+ React.createElement("span", { className: "icon" },
552
+ React.createElement("i", { className: "material-icons" }, "keyboard_arrow_right"))))))),
553
+ !isReadOnly && (React.createElement("div", { className: "buttons ob-buttons ob-buttons-submit" },
554
+ onSaveDraft && !isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: () => handleSaveDraft(false), disabled: isPreview || disabled },
555
+ 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 }))),
556
+ React.createElement("span", { className: "ob-buttons-submit__spacer" }),
557
+ !isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled },
558
+ 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 }))),
559
+ 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 },
560
+ React.createElement(CustomisableButtonInner, { label: isInfoPage
561
+ ? 'Done'
562
+ : ((_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 }))))))),
563
+ !isReadOnly && (React.createElement(React.Fragment, null,
564
+ React.createElement(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }),
565
+ 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,
566
+ onSaveDraft && (React.createElement("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: () => handleSaveDraft(false) },
567
+ 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 }))),
568
+ React.createElement("span", { style: { flex: 1 } }),
569
+ React.createElement("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing },
570
+ 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 })),
571
+ React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges },
572
+ 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 }))) },
573
+ React.createElement("p", null, "You have unsaved changes, are you sure you want discard them?")),
574
+ React.createElement(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: React.createElement(React.Fragment, null,
575
+ React.createElement("span", { style: { flex: 1 } }),
576
+ React.createElement("button", { type: "button", className: "button ob-button is-light cypress-attachments-confirm-wait", onClick: handleWaitForAttachments }, "Wait"),
577
+ React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-attachments-confirm-continue", onClick: handleContinueWithAttachments }, "Continue")) },
578
+ React.createElement("p", null, "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.")),
579
+ React.createElement(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: React.createElement(React.Fragment, null,
580
+ onSaveDraft && (React.createElement("button", { type: "button", className: "button ob-button ob-button__offline-submission-attempt-save-draft is-success", onClick: () => handleSaveDraft(false) },
581
+ React.createElement(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 }))),
582
+ React.createElement("span", { style: { flex: 1 } }),
583
+ React.createElement("button", { className: "button ob-button ob-button__offline-submission-attempt-cancel is-light", onClick: () => setPromptOfflineSubmissionAttempt(false) }, "Cancel"),
584
+ React.createElement("button", { className: "button ob-button ob-button__offline-submission-attempt-try-again is-primary", onClick: (e) => {
585
+ setPromptOfflineSubmissionAttempt(false);
586
+ handleSubmit(e, false);
587
+ } }, "Try Again")) },
588
+ React.createElement("p", { className: "ob-modal__offline-submission-attempt-message" },
589
+ "You cannot submit this form while offline, please try again when connectivity is restored.",
590
+ onSaveDraft && (React.createElement("span", { className: "ob-modal__offline-submission-attempt-save-draft-message" },
591
+ ' ',
592
+ "Alternatively, click the",
593
+ ' ',
594
+ React.createElement("b", null, ((_q = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _q === void 0 ? void 0 : _q.label) || 'Save Draft'),
595
+ ' ',
596
+ "button below to come back to this later."))),
597
+ React.createElement("i", { className: "material-icons has-text-warning icon-x-large ob-modal__offline-submission-attempt-icon" }, "wifi_off")))))))));
611
598
  }
612
599
  export default React.memo(OneBlinkFormBase);
613
600
  //# sourceMappingURL=OneBlinkFormBase.js.map