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

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 (173) hide show
  1. package/dist/OneBlinkAutoSaveForm.d.ts +5 -2
  2. package/dist/OneBlinkAutoSaveForm.js.map +1 -1
  3. package/dist/OneBlinkForm.d.ts +12 -62
  4. package/dist/OneBlinkForm.js +5 -2
  5. package/dist/OneBlinkForm.js.map +1 -1
  6. package/dist/OneBlinkFormBase.js +10 -4
  7. package/dist/OneBlinkFormBase.js.map +1 -1
  8. package/dist/OneBlinkReadOnlyForm.d.ts +0 -2
  9. package/dist/OneBlinkReadOnlyForm.js +1 -40
  10. package/dist/OneBlinkReadOnlyForm.js.map +1 -1
  11. package/dist/apps/services/api/submissions.d.ts +18 -2
  12. package/dist/apps/services/api/submissions.js +40 -4
  13. package/dist/apps/services/api/submissions.js.map +1 -1
  14. package/dist/apps/services/errors/oneBlinkAppsError.d.ts +8 -0
  15. package/dist/apps/services/errors/oneBlinkAppsError.js +1 -0
  16. package/dist/apps/services/errors/oneBlinkAppsError.js.map +1 -1
  17. package/dist/apps/submission-service.d.ts +6 -2
  18. package/dist/apps/submission-service.js +2 -2
  19. package/dist/apps/submission-service.js.map +1 -1
  20. package/dist/components/ArcGISWebMap.d.ts +2 -1
  21. package/dist/components/ArcGISWebMap.js +12 -4
  22. package/dist/components/ArcGISWebMap.js.map +1 -1
  23. package/dist/components/renderer/LookupButton.js +7 -5
  24. package/dist/components/renderer/LookupButton.js.map +1 -1
  25. package/dist/components/renderer/LookupNotification.js +28 -10
  26. package/dist/components/renderer/LookupNotification.js.map +1 -1
  27. package/dist/components/renderer/OneBlinkFormElements.d.ts +16 -1
  28. package/dist/components/renderer/OneBlinkFormElements.js +83 -39
  29. package/dist/components/renderer/OneBlinkFormElements.js.map +1 -1
  30. package/dist/components/renderer/ReverseGeocode.js +13 -1
  31. package/dist/components/renderer/ReverseGeocode.js.map +1 -1
  32. package/dist/components/renderer/attachments/DropdownMenu.d.ts +1 -2
  33. package/dist/components/renderer/attachments/DropdownMenu.js +4 -10
  34. package/dist/components/renderer/attachments/DropdownMenu.js.map +1 -1
  35. package/dist/components/renderer/attachments/FileCard.d.ts +2 -1
  36. package/dist/components/renderer/attachments/FileCard.js +2 -2
  37. package/dist/components/renderer/attachments/FileCard.js.map +1 -1
  38. package/dist/form-elements/FormElementABN.d.ts +2 -1
  39. package/dist/form-elements/FormElementABN.js +3 -3
  40. package/dist/form-elements/FormElementABN.js.map +1 -1
  41. package/dist/form-elements/FormElementAPINSWLiquorLicence.d.ts +2 -1
  42. package/dist/form-elements/FormElementAPINSWLiquorLicence.js +2 -2
  43. package/dist/form-elements/FormElementAPINSWLiquorLicence.js.map +1 -1
  44. package/dist/form-elements/FormElementArcGISWebMap.d.ts +2 -1
  45. package/dist/form-elements/FormElementArcGISWebMap.js +5 -5
  46. package/dist/form-elements/FormElementArcGISWebMap.js.map +1 -1
  47. package/dist/form-elements/FormElementAutocomplete.d.ts +1 -0
  48. package/dist/form-elements/FormElementAutocomplete.js +4 -4
  49. package/dist/form-elements/FormElementAutocomplete.js.map +1 -1
  50. package/dist/form-elements/FormElementBSB.d.ts +2 -1
  51. package/dist/form-elements/FormElementBSB.js +3 -3
  52. package/dist/form-elements/FormElementBSB.js.map +1 -1
  53. package/dist/form-elements/FormElementBarcodeScanner.d.ts +2 -1
  54. package/dist/form-elements/FormElementBarcodeScanner.js +2 -2
  55. package/dist/form-elements/FormElementBarcodeScanner.js.map +1 -1
  56. package/dist/form-elements/FormElementBoolean.d.ts +2 -1
  57. package/dist/form-elements/FormElementBoolean.js +3 -3
  58. package/dist/form-elements/FormElementBoolean.js.map +1 -1
  59. package/dist/form-elements/FormElementCamera.d.ts +2 -1
  60. package/dist/form-elements/FormElementCamera.js +4 -4
  61. package/dist/form-elements/FormElementCamera.js.map +1 -1
  62. package/dist/form-elements/FormElementCheckBoxes.d.ts +2 -1
  63. package/dist/form-elements/FormElementCheckBoxes.js +4 -4
  64. package/dist/form-elements/FormElementCheckBoxes.js.map +1 -1
  65. package/dist/form-elements/FormElementCivicaNameRecord.js +1 -1
  66. package/dist/form-elements/FormElementCivicaNameRecord.js.map +1 -1
  67. package/dist/form-elements/FormElementCivicaStreetName.d.ts +2 -1
  68. package/dist/form-elements/FormElementCivicaStreetName.js +2 -2
  69. package/dist/form-elements/FormElementCivicaStreetName.js.map +1 -1
  70. package/dist/form-elements/FormElementCompliance.d.ts +2 -1
  71. package/dist/form-elements/FormElementCompliance.js +5 -12
  72. package/dist/form-elements/FormElementCompliance.js.map +1 -1
  73. package/dist/form-elements/FormElementDate.d.ts +2 -1
  74. package/dist/form-elements/FormElementDate.js +3 -3
  75. package/dist/form-elements/FormElementDate.js.map +1 -1
  76. package/dist/form-elements/FormElementDateTime.d.ts +2 -1
  77. package/dist/form-elements/FormElementDateTime.js +3 -3
  78. package/dist/form-elements/FormElementDateTime.js.map +1 -1
  79. package/dist/form-elements/FormElementEmail.d.ts +2 -1
  80. package/dist/form-elements/FormElementEmail.js +2 -2
  81. package/dist/form-elements/FormElementEmail.js.map +1 -1
  82. package/dist/form-elements/FormElementFile.d.ts +1 -0
  83. package/dist/form-elements/FormElementFile.js +2 -2
  84. package/dist/form-elements/FormElementFile.js.map +1 -1
  85. package/dist/form-elements/FormElementFiles.d.ts +2 -1
  86. package/dist/form-elements/FormElementFiles.js +4 -4
  87. package/dist/form-elements/FormElementFiles.js.map +1 -1
  88. package/dist/form-elements/FormElementForm.d.ts +21 -1
  89. package/dist/form-elements/FormElementForm.js +5 -12
  90. package/dist/form-elements/FormElementForm.js.map +1 -1
  91. package/dist/form-elements/FormElementFreshdeskDependentField.js +1 -1
  92. package/dist/form-elements/FormElementFreshdeskDependentField.js.map +1 -1
  93. package/dist/form-elements/FormElementGeoscapeAddress.d.ts +2 -1
  94. package/dist/form-elements/FormElementGeoscapeAddress.js +2 -2
  95. package/dist/form-elements/FormElementGeoscapeAddress.js.map +1 -1
  96. package/dist/form-elements/FormElementGoogleAddress.d.ts +2 -1
  97. package/dist/form-elements/FormElementGoogleAddress.js +2 -2
  98. package/dist/form-elements/FormElementGoogleAddress.js.map +1 -1
  99. package/dist/form-elements/FormElementLocation.d.ts +2 -1
  100. package/dist/form-elements/FormElementLocation.js +3 -3
  101. package/dist/form-elements/FormElementLocation.js.map +1 -1
  102. package/dist/form-elements/FormElementLookupButton.d.ts +2 -1
  103. package/dist/form-elements/FormElementLookupButton.js +5 -2
  104. package/dist/form-elements/FormElementLookupButton.js.map +1 -1
  105. package/dist/form-elements/FormElementNumber.d.ts +2 -1
  106. package/dist/form-elements/FormElementNumber.js +4 -4
  107. package/dist/form-elements/FormElementNumber.js.map +1 -1
  108. package/dist/form-elements/FormElementPointAddress.d.ts +2 -1
  109. package/dist/form-elements/FormElementPointAddress.js +2 -2
  110. package/dist/form-elements/FormElementPointAddress.js.map +1 -1
  111. package/dist/form-elements/FormElementPointAddressV3.d.ts +2 -1
  112. package/dist/form-elements/FormElementPointAddressV3.js +2 -2
  113. package/dist/form-elements/FormElementPointAddressV3.js.map +1 -1
  114. package/dist/form-elements/FormElementPointCadastralParcel.d.ts +2 -1
  115. package/dist/form-elements/FormElementPointCadastralParcel.js +3 -3
  116. package/dist/form-elements/FormElementPointCadastralParcel.js.map +1 -1
  117. package/dist/form-elements/FormElementRadio.d.ts +2 -1
  118. package/dist/form-elements/FormElementRadio.js +3 -3
  119. package/dist/form-elements/FormElementRadio.js.map +1 -1
  120. package/dist/form-elements/FormElementRepeatableSet.d.ts +13 -1
  121. package/dist/form-elements/FormElementRepeatableSet.js +10 -10
  122. package/dist/form-elements/FormElementRepeatableSet.js.map +1 -1
  123. package/dist/form-elements/FormElementSection.d.ts +7 -1
  124. package/dist/form-elements/FormElementSection.js +2 -2
  125. package/dist/form-elements/FormElementSection.js.map +1 -1
  126. package/dist/form-elements/FormElementSelect.d.ts +2 -1
  127. package/dist/form-elements/FormElementSelect.js +4 -4
  128. package/dist/form-elements/FormElementSelect.js.map +1 -1
  129. package/dist/form-elements/FormElementSignature.d.ts +2 -1
  130. package/dist/form-elements/FormElementSignature.js +9 -9
  131. package/dist/form-elements/FormElementSignature.js.map +1 -1
  132. package/dist/form-elements/FormElementTelephone.d.ts +2 -1
  133. package/dist/form-elements/FormElementTelephone.js +2 -2
  134. package/dist/form-elements/FormElementTelephone.js.map +1 -1
  135. package/dist/form-elements/FormElementText.d.ts +2 -1
  136. package/dist/form-elements/FormElementText.js +2 -2
  137. package/dist/form-elements/FormElementText.js.map +1 -1
  138. package/dist/form-elements/FormElementTextarea.d.ts +2 -1
  139. package/dist/form-elements/FormElementTextarea.js +3 -3
  140. package/dist/form-elements/FormElementTextarea.js.map +1 -1
  141. package/dist/form-elements/FormElementTime.d.ts +2 -1
  142. package/dist/form-elements/FormElementTime.js +3 -3
  143. package/dist/form-elements/FormElementTime.js.map +1 -1
  144. package/dist/form-elements/OptionButton.d.ts +1 -1
  145. package/dist/form-elements/OptionButton.js +2 -2
  146. package/dist/form-elements/OptionButton.js.map +1 -1
  147. package/dist/hooks/useDynamicOptionsLoaderState.js +5 -1
  148. package/dist/hooks/useDynamicOptionsLoaderState.js.map +1 -1
  149. package/dist/hooks/useFormValidation.d.ts +1 -1
  150. package/dist/hooks/useFormValidation.js +20 -8
  151. package/dist/hooks/useFormValidation.js.map +1 -1
  152. package/dist/hooks/useLookupNotification.d.ts +22 -2
  153. package/dist/hooks/useLookupNotification.js +2 -1
  154. package/dist/hooks/useLookupNotification.js.map +1 -1
  155. package/dist/index.d.ts +1 -1
  156. package/dist/index.js.map +1 -1
  157. package/dist/services/form-validation/extensions.d.ts +2 -1
  158. package/dist/services/form-validation/extensions.js +2 -1
  159. package/dist/services/form-validation/extensions.js.map +1 -1
  160. package/dist/services/form-validation/validateSubmission.d.ts +2 -1
  161. package/dist/services/form-validation/validateSubmission.js +38 -12
  162. package/dist/services/form-validation/validateSubmission.js.map +1 -1
  163. package/dist/services/generateCivicaNameRecordElements.js +0 -13
  164. package/dist/services/generateCivicaNameRecordElements.js.map +1 -1
  165. package/dist/services/generateFreshdeskDependentFieldElements.js +0 -3
  166. package/dist/services/generateFreshdeskDependentFieldElements.js.map +1 -1
  167. package/dist/services/isElementReadOnlyForAudience.d.ts +20 -0
  168. package/dist/services/isElementReadOnlyForAudience.js +46 -0
  169. package/dist/services/isElementReadOnlyForAudience.js.map +1 -0
  170. package/dist/services/resolveFormElementReadOnly.d.ts +10 -0
  171. package/dist/services/resolveFormElementReadOnly.js +17 -0
  172. package/dist/services/resolveFormElementReadOnly.js.map +1 -0
  173. package/package.json +2 -2
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { OneBlinkFormUncontrolled } from './OneBlinkForm';
3
- declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, resumePreviousElapsedDurationSeconds, ...props }: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
3
+ type OneBlinkAutoSaveFormProps = Extract<React.ComponentProps<typeof OneBlinkFormUncontrolled>, {
4
+ audience: 'SUBMITTER';
5
+ }> & {
4
6
  /** Pass a unique key for this submission e.g. the `externalId` the parameter */
5
7
  autoSaveKey: string;
6
8
  /**
@@ -15,7 +17,8 @@ declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement
15
17
  * later, pass `false`.
16
18
  */
17
19
  removeAutoSaveDataBeforeSaveDraft?: boolean;
18
- }): import("react/jsx-runtime").JSX.Element;
20
+ };
21
+ declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, resumePreviousElapsedDurationSeconds, ...props }: OneBlinkAutoSaveFormProps): import("react/jsx-runtime").JSX.Element;
19
22
  /**
20
23
  * This component is a drop in replacement for {@link OneBlinkForm} with the
21
24
  * addition of auto save happening periodically to prevent users from losing
@@ -1 +1 @@
1
- {"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAGnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,oCAAoC,EACpC,GAAG,KAAK,EAgBT;IACC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,4BAA4B,GAC7B,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,cAAc,EAAE,QAAQ;QACxB,kBAAkB;QAClB,oCAAoC;KACrC,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,cAAK,SAAS,EAAC,mCAAmC,YAChD,KAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,GACjD,CACP,CAAA;IACH,CAAC;IAED,IAAI,6BAA6B,EAAE,CAAC;QAClC,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EACL,8BACE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,GAAG,EAAE;4BACZ,kBAAkB,EAAE,CAAA;wBACtB,CAAC,4BAGM,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,EACnC,SAAS,+BAGF,IACR,iHAKC,CACT,CAAA;IACH,CAAC;IACD,OAAO,CACL,KAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,4BAA4B,EAAE,4BAA4B,GAC1D,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport OnLoading from './components/renderer/OnLoading'\nimport Modal from './components/renderer/Modal'\nimport OneBlinkFormBase from './OneBlinkFormBase'\nimport useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState'\nimport { OneBlinkFormUncontrolled } from './OneBlinkForm'\n\nfunction OneBlinkAutoSaveForm({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n disabled,\n onCancel,\n onSubmit,\n onSaveDraft,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n ...props\n}: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {\n /** Pass a unique key for this submission e.g. the `externalId` the parameter */\n autoSaveKey: string\n /**\n * By default, auto save data is removed when the user clicks Submit. If you\n * would like auto save data to persist and clean up the auto save data later,\n * pass `false`.\n */\n removeAutoSaveDataBeforeSubmit?: boolean\n /**\n * By default, auto save data is removed when the user clicks Save Draft. If\n * you would like auto save data to persist and clean up the auto save data\n * later, pass `false`.\n */\n removeAutoSaveDataBeforeSaveDraft?: boolean\n}) {\n const {\n definition,\n submission,\n isLoadingAutoSaveSubmission,\n isAutoSaveSubmissionAvailable,\n startNewSubmission,\n continueAutoSaveSubmission,\n handleSubmit,\n handleCancel,\n handleSaveDraft,\n setFormSubmission,\n handleNavigateAway,\n lastElementUpdated,\n executedLookups,\n sectionState,\n getCurrentSubmissionDuration,\n } = useFormSubmissionAutoSaveState({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n onCancel,\n onSubmit,\n onSaveDraft,\n formIsDisabled: disabled,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n })\n\n if (isLoadingAutoSaveSubmission) {\n return (\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n </div>\n )\n }\n\n if (isAutoSaveSubmissionAvailable) {\n return (\n <Modal\n isOpen\n title=\"Continue?\"\n cardClassName=\"cypress-continue-auto-save\"\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button is-light cypress-continue-auto-save-start-again-button\"\n onClick={() => {\n startNewSubmission()\n }}\n >\n Start Again\n </button>\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-continue-auto-save-continue-button\"\n onClick={continueAutoSaveSubmission}\n autoFocus\n >\n Continue\n </button>\n </>\n }\n >\n We found an in progress submission, would you like to pick up where you\n left off or start again?\n </Modal>\n )\n }\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n submission={submission}\n definition={definition}\n onCancel={handleCancel}\n onSubmit={handleSubmit}\n onSaveDraft={handleSaveDraft}\n setFormSubmission={setFormSubmission}\n handleNavigateAway={handleNavigateAway}\n lastElementUpdated={lastElementUpdated}\n executedLookups={executedLookups}\n sectionState={sectionState}\n getCurrentSubmissionDuration={getCurrentSubmissionDuration}\n />\n )\n}\n\n/**\n * This component is a drop in replacement for {@link OneBlinkForm} with the\n * addition of auto save happening periodically to prevent users from losing\n * submission data.\n *\n * If you need auto saving with a controlled form, see the\n * {@link OneBlinkFormControlled} component for a full example.\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkAutoSaveForm)\n"]}
1
+ {"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAuBnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,oCAAoC,EACpC,GAAG,KAAK,EACkB;IAC1B,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,4BAA4B,GAC7B,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,cAAc,EAAE,QAAQ;QACxB,kBAAkB;QAClB,oCAAoC;KACrC,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,cAAK,SAAS,EAAC,mCAAmC,YAChD,KAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,GACjD,CACP,CAAA;IACH,CAAC;IAED,IAAI,6BAA6B,EAAE,CAAC;QAClC,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EACL,8BACE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,GAAG,EAAE;4BACZ,kBAAkB,EAAE,CAAA;wBACtB,CAAC,4BAGM,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,EACnC,SAAS,+BAGF,IACR,iHAKC,CACT,CAAA;IACH,CAAC;IACD,OAAO,CACL,KAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,4BAA4B,EAAE,4BAA4B,GAC1D,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport OnLoading from './components/renderer/OnLoading'\nimport Modal from './components/renderer/Modal'\nimport OneBlinkFormBase from './OneBlinkFormBase'\nimport useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState'\nimport { OneBlinkFormUncontrolled } from './OneBlinkForm'\n\ntype OneBlinkAutoSaveFormProps = Extract<\n React.ComponentProps<typeof OneBlinkFormUncontrolled>,\n { audience: 'SUBMITTER' }\n> & {\n /** Pass a unique key for this submission e.g. the `externalId` the parameter */\n autoSaveKey: string\n /**\n * By default, auto save data is removed when the user clicks Submit. If you\n * would like auto save data to persist and clean up the auto save data later,\n * pass `false`.\n */\n removeAutoSaveDataBeforeSubmit?: boolean\n /**\n * By default, auto save data is removed when the user clicks Save Draft. If\n * you would like auto save data to persist and clean up the auto save data\n * later, pass `false`.\n */\n removeAutoSaveDataBeforeSaveDraft?: boolean\n}\n\nfunction OneBlinkAutoSaveForm({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n disabled,\n onCancel,\n onSubmit,\n onSaveDraft,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n ...props\n}: OneBlinkAutoSaveFormProps) {\n const {\n definition,\n submission,\n isLoadingAutoSaveSubmission,\n isAutoSaveSubmissionAvailable,\n startNewSubmission,\n continueAutoSaveSubmission,\n handleSubmit,\n handleCancel,\n handleSaveDraft,\n setFormSubmission,\n handleNavigateAway,\n lastElementUpdated,\n executedLookups,\n sectionState,\n getCurrentSubmissionDuration,\n } = useFormSubmissionAutoSaveState({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n onCancel,\n onSubmit,\n onSaveDraft,\n formIsDisabled: disabled,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n })\n\n if (isLoadingAutoSaveSubmission) {\n return (\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n </div>\n )\n }\n\n if (isAutoSaveSubmissionAvailable) {\n return (\n <Modal\n isOpen\n title=\"Continue?\"\n cardClassName=\"cypress-continue-auto-save\"\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button is-light cypress-continue-auto-save-start-again-button\"\n onClick={() => {\n startNewSubmission()\n }}\n >\n Start Again\n </button>\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-continue-auto-save-continue-button\"\n onClick={continueAutoSaveSubmission}\n autoFocus\n >\n Continue\n </button>\n </>\n }\n >\n We found an in progress submission, would you like to pick up where you\n left off or start again?\n </Modal>\n )\n }\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n submission={submission}\n definition={definition}\n onCancel={handleCancel}\n onSubmit={handleSubmit}\n onSaveDraft={handleSaveDraft}\n setFormSubmission={setFormSubmission}\n handleNavigateAway={handleNavigateAway}\n lastElementUpdated={lastElementUpdated}\n executedLookups={executedLookups}\n sectionState={sectionState}\n getCurrentSubmissionDuration={getCurrentSubmissionDuration}\n />\n )\n}\n\n/**\n * This component is a drop in replacement for {@link OneBlinkForm} with the\n * addition of auto save happening periodically to prevent users from losing\n * submission data.\n *\n * If you need auto saving with a controlled form, see the\n * {@link OneBlinkFormControlled} component for a full example.\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkAutoSaveForm)\n"]}
@@ -2,7 +2,14 @@ import * as React from 'react';
2
2
  import { FormTypes } from '@oneblink/types';
3
3
  import { OneBlinkFormBaseProps, OneBlinkFormControlledProps, OneBlinkFormUncontrolledProps } from './OneBlinkFormBase';
4
4
  import { SectionState } from './types/form';
5
- export { OneBlinkFormBaseProps, OneBlinkFormControlledProps };
5
+ type OneBlinkApproverFormBaseProps = Omit<OneBlinkFormBaseProps, 'audience' | 'onCancel' | 'onSaveDraft' | 'onSubmit'> & {
6
+ audience: 'APPROVER';
7
+ };
8
+ type OneBlinkFormAudienceProps = (OneBlinkFormBaseProps & {
9
+ audience: 'SUBMITTER';
10
+ }) | OneBlinkApproverFormBaseProps;
11
+ export type OneBlinkFormControlledComponentProps = OneBlinkFormControlledProps & OneBlinkFormAudienceProps;
12
+ export { OneBlinkFormBaseProps, OneBlinkFormControlledProps, OneBlinkFormUncontrolledProps, };
6
13
  /**
7
14
  * Similar to {@link OneBlinkForm}, however requires props to control the
8
15
  * `definition` and `submission` values.
@@ -327,36 +334,7 @@ export { OneBlinkFormBaseProps, OneBlinkFormControlledProps };
327
334
  * @returns
328
335
  * @group Components
329
336
  */
330
- declare const OneBlinkFormControlled: React.NamedExoticComponent<import("./OneBlinkFormBase").OneBlinkReadOnlyFormProps & {
331
- onCancel: () => unknown;
332
- onSubmit: (newFormSubmission: import("./apps/submission-service").NewFormSubmission) => unknown;
333
- disabled?: boolean;
334
- isPreview?: boolean;
335
- abnLookupAuthenticationGuid?: string;
336
- captchaSiteKey?: string;
337
- buttons?: import("@oneblink/types/typescript/formsApps").FormsListStyles["buttons"];
338
- validationIcon?: import("@oneblink/types/typescript/environments").FormsAppEnvironmentStyles["validationIcon"];
339
- attachmentRetentionInDays?: number;
340
- isPendingQueueEnabled: boolean;
341
- onSaveDraft?: (newDraftSubmission: import("./apps/submission-service").NewDraftSubmission) => unknown;
342
- handleNavigateAway?: () => unknown;
343
- isInfoPage?: "YES" | "NO" | "CALCULATED";
344
- onUploadAttachment?: typeof import("./apps/attachments-service").uploadAttachment;
345
- captchaType?: import("./types/form").CaptchaType;
346
- shouldUseNavigableValidationErrorsNotification?: boolean;
347
- navigableValidationErrorsNotificationSettings?: {
348
- navigationTopOffset?: number;
349
- scrollableContainerId?: string;
350
- };
351
- scrollToTopOfPage?: boolean;
352
- getCurrentSubmissionDuration?: () => number;
353
- onBeforeUnload?: (props: {
354
- submission: import("@oneblink/types/typescript/submissions").S3SubmissionData["submission"];
355
- definition: FormTypes.Form;
356
- lastElementUpdated: FormTypes.FormElement | undefined;
357
- submissionDuration: number | undefined;
358
- }) => void;
359
- } & OneBlinkFormControlledProps>;
337
+ declare const OneBlinkFormControlled: React.NamedExoticComponent<OneBlinkFormControlledComponentProps>;
360
338
  /**
361
339
  * Component for rendering a OneBlink Form. This component will render the
362
340
  * submit, cancel and save draft buttons but it is up to the developer to
@@ -577,39 +555,11 @@ declare const OneBlinkFormControlled: React.NamedExoticComponent<import("./OneBl
577
555
  * @returns
578
556
  * @group Components
579
557
  */
580
- declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<import("./OneBlinkFormBase").OneBlinkReadOnlyFormProps & {
581
- onCancel: () => unknown;
582
- onSubmit: (newFormSubmission: import("./apps/submission-service").NewFormSubmission) => unknown;
583
- disabled?: boolean;
584
- isPreview?: boolean;
585
- abnLookupAuthenticationGuid?: string;
586
- captchaSiteKey?: string;
587
- buttons?: import("@oneblink/types/typescript/formsApps").FormsListStyles["buttons"];
588
- validationIcon?: import("@oneblink/types/typescript/environments").FormsAppEnvironmentStyles["validationIcon"];
589
- attachmentRetentionInDays?: number;
590
- isPendingQueueEnabled: boolean;
591
- onSaveDraft?: (newDraftSubmission: import("./apps/submission-service").NewDraftSubmission) => unknown;
592
- handleNavigateAway?: () => unknown;
593
- isInfoPage?: "YES" | "NO" | "CALCULATED";
594
- onUploadAttachment?: typeof import("./apps/attachments-service").uploadAttachment;
595
- captchaType?: import("./types/form").CaptchaType;
596
- shouldUseNavigableValidationErrorsNotification?: boolean;
597
- navigableValidationErrorsNotificationSettings?: {
598
- navigationTopOffset?: number;
599
- scrollableContainerId?: string;
600
- };
601
- scrollToTopOfPage?: boolean;
602
- getCurrentSubmissionDuration?: () => number;
603
- onBeforeUnload?: (props: {
604
- submission: import("@oneblink/types/typescript/submissions").S3SubmissionData["submission"];
605
- definition: FormTypes.Form;
606
- lastElementUpdated: FormTypes.FormElement | undefined;
607
- submissionDuration: number | undefined;
608
- }) => void;
609
- } & OneBlinkFormUncontrolledProps & {
558
+ declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<OneBlinkFormUncontrolledProps & (OneBlinkFormAudienceProps & {
610
559
  /** The element to resume the form at. */
611
560
  resumeAtElement?: FormTypes.FormElement;
612
561
  resumeSectionState?: SectionState;
613
562
  resumePreviousElapsedDurationSeconds?: number;
614
- }>;
563
+ })>;
564
+ export type OneBlinkFormProps = React.ComponentProps<typeof OneBlinkFormUncontrolled>;
615
565
  export { OneBlinkFormControlled, OneBlinkFormUncontrolled };
@@ -3,6 +3,7 @@ import * as React from 'react';
3
3
  import OneBlinkFormBase from './OneBlinkFormBase';
4
4
  import useFormSubmissionState from './hooks/useFormSubmissionState';
5
5
  import useFormSubmissionDuration from './hooks/useFormSubmissionDuration';
6
+ const noop = () => { };
6
7
  /**
7
8
  * Similar to {@link OneBlinkForm}, however requires props to control the
8
9
  * `definition` and `submission` values.
@@ -328,7 +329,8 @@ import useFormSubmissionDuration from './hooks/useFormSubmissionDuration';
328
329
  * @group Components
329
330
  */
330
331
  const OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(props) {
331
- return _jsx(OneBlinkFormBase, { ...props, isReadOnly: false });
332
+ const isApprover = props.audience === 'APPROVER';
333
+ return (_jsx(OneBlinkFormBase, { ...props, isReadOnly: false, onCancel: isApprover ? noop : props.onCancel, onSubmit: isApprover ? noop : props.onSubmit }));
332
334
  });
333
335
  /**
334
336
  * Component for rendering a OneBlink Form. This component will render the
@@ -553,7 +555,8 @@ const OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(props)
553
555
  const OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({ form, initialSubmission, resumeAtElement, resumeSectionState, resumePreviousElapsedDurationSeconds, ...props }) {
554
556
  const [getCurrentSubmissionDuration] = useFormSubmissionDuration(resumePreviousElapsedDurationSeconds);
555
557
  const [{ definition, submission, lastElementUpdated, executedLookups, sectionState, }, setFormSubmission,] = useFormSubmissionState(form, initialSubmission, resumeAtElement, resumeSectionState);
556
- return (_jsx(OneBlinkFormBase, { ...props, isReadOnly: false, definition: definition, submission: submission, setFormSubmission: setFormSubmission, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, sectionState: sectionState, getCurrentSubmissionDuration: getCurrentSubmissionDuration }));
558
+ const isApprover = props.audience === 'APPROVER';
559
+ return (_jsx(OneBlinkFormBase, { ...props, isReadOnly: false, definition: definition, submission: submission, setFormSubmission: setFormSubmission, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, sectionState: sectionState, getCurrentSubmissionDuration: getCurrentSubmissionDuration, onCancel: isApprover ? noop : props.onCancel, onSubmit: isApprover ? noop : props.onSubmit }));
557
560
  });
558
561
  export { OneBlinkFormControlled, OneBlinkFormUncontrolled };
559
562
  //# sourceMappingURL=OneBlinkForm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"OneBlinkForm.js","sourceRoot":"","sources":["../src/OneBlinkForm.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,gBAIN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,MAAM,gCAAgC,CAAA;AACnE,OAAO,yBAAyB,MAAM,mCAAmC,CAAA;AAKzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmUG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,sBAAsB,CACvE,KAA0D;IAE1D,OAAO,KAAC,gBAAgB,OAAK,KAAK,EAAE,UAAU,EAAE,KAAK,GAAI,CAAA;AAC3D,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2NG;AACH,MAAM,wBAAwB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAAC,EAC5E,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,oCAAoC,EACpC,GAAG,KAAK,EAOP;IACD,MAAM,CAAC,4BAA4B,CAAC,GAAG,yBAAyB,CAC9D,oCAAoC,CACrC,CAAA;IACD,MAAM,CACJ,EACE,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,YAAY,GACb,EACD,iBAAiB,EAClB,GAAG,sBAAsB,CACxB,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,CACnB,CAAA;IACD,OAAO,CACL,KAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,4BAA4B,EAAE,4BAA4B,GAC1D,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport OneBlinkFormBase, {\n OneBlinkFormBaseProps,\n OneBlinkFormControlledProps,\n OneBlinkFormUncontrolledProps,\n} from './OneBlinkFormBase'\nimport useFormSubmissionState from './hooks/useFormSubmissionState'\nimport useFormSubmissionDuration from './hooks/useFormSubmissionDuration'\nimport { SectionState } from './types/form'\n\nexport { OneBlinkFormBaseProps, OneBlinkFormControlledProps }\n\n/**\n * Similar to {@link OneBlinkForm}, however requires props to control the\n * `definition` and `submission` values.\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n * OneBlinkAppsError,\n * draftService,\n * submissionService,\n * IsOfflineContextProvider,\n * OneBlinkFormControlled,\n * useIsMounted,\n * useFormSubmissionState,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n * id: 1,\n * name: 'Name of Form',\n * description: '',\n * organisationId: 'abc123',\n * formsAppEnvironmentId: 1,\n * formsAppIds: [],\n * elements: [],\n * isAuthenticated: false,\n * isMultiPage: false,\n * isInfoPage: false,\n * publishStartDate: null,\n * publishEndDate: null,\n * postSubmissionAction: 'FORMS_LIBRARY',\n * submissionEvents: [],\n * tags: [],\n * }\n * const initialSubmission: Record<string, unknown> = {\n * data: 1,\n * }\n *\n * function FormContainer() {\n * const isMounted = useIsMounted()\n *\n * const [{ definition, submission }, setFormSubmission] =\n * useFormSubmissionState(form, initialSubmission)\n *\n * const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n * React.useState({\n * isSavingDraft: false,\n * saveDraftError: null,\n * })\n *\n * const [\n * { isSubmitting, submitError, formSubmissionResult },\n * setSubmitState,\n * ] = React.useState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: null,\n * })\n *\n * const handleSubmit = React.useCallback(\n * async (newFormSubmission: FormTypes.NewFormSubmission) => {\n * const formSubmission: FormSubmission = Object.assign(\n * {},\n * newFormSubmission,\n * {\n * formsAppId,\n * jobId: null,\n * externalId: null,\n * draftId: null,\n * preFillFormDataId: null,\n * },\n * )\n *\n * setSubmitState({\n * formSubmissionResult: null,\n * submitError: null,\n * isSubmitting: true,\n * })\n *\n * try {\n * const newFormSubmissionResult = await submissionService.submit({\n * formSubmission,\n * })\n * if (\n * newFormSubmissionResult.isOffline &&\n * !newFormSubmissionResult.isInPendingQueue\n * ) {\n * throw new OneBlinkAppsError(\n * 'You cannot submit this form while offline, please try again when connectivity is restored.',\n * {\n * isOffline: true,\n * },\n * )\n * }\n *\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: newFormSubmissionResult,\n * isSubmitting: false,\n * submitError: null,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: error,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleSaveDraft = React.useCallback(\n * async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n * const draftSubmission: FormTypes.DraftSubmission = {\n * ...newDraftSubmission,\n * formsAppId,\n * }\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: true,\n * })\n *\n * try {\n * await draftService.addDraft(\n * {\n * title: form.name,\n * formId: form.id,\n * externalId: null,\n * jobId: null,\n * },\n * draftSubmission,\n * )\n *\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: false,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: error,\n * isSavingDraft: false,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleCancel = React.useCallback(() => {\n * // handle cancel here...\n * }, [])\n *\n * if (isSubmitting) {\n * // Render submitting animation/loading\n * }\n *\n * if (submitError) {\n * // Render error while submitting\n * }\n *\n * if (isSavingDraft) {\n * // Render saving draft animation/loading\n * }\n *\n * if (saveDraftError) {\n * // Render error while saving draft\n * }\n *\n * if (formSubmissionResult) {\n * // Render submission success\n * }\n *\n * return (\n * <OneBlinkFormControlled\n * captchaSiteKey={captchaSiteKey}\n * googleMapsApiKey={googleMapsApiKey}\n * formsAppId={formsAppId}\n * definition={definition}\n * submission={submission}\n * setFormSubmission={setFormSubmission}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * audience=\"SUBMITTER\"\n * />\n * )\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <FormContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * #### Implementing Controlled Auto Save\n *\n * The {@link OneBlinkAutoSaveForm} component does not offer props to allow for a\n * controlled form (i.e. having access to `submission` and `definition` values).\n * To implement a controlled version of the `<OneBlinkAutoSaveForm />`\n * component, use the example component below.\n *\n * ```tsx\n * import * as React from 'react'\n * import {\n * OneBlinkAutoSaveForm,\n * OneBlinkFormControlled,\n * useFormSubmissionAutoSaveState,\n * } from '@oneblink/apps-react'\n *\n * function OneBlinkAutoSaveFormControlled({\n * form,\n * initialSubmission,\n * autoSaveKey,\n * onCancel,\n * onSubmit,\n * onSaveDraft,\n * ...props\n * }: React.ComponentProps<typeof OneBlinkAutoSaveForm>) {\n * const {\n * definition,\n * submission,\n * isLoadingAutoSaveSubmission,\n * isAutoSaveSubmissionAvailable,\n * startNewSubmission,\n * continueAutoSaveSubmission,\n * handleSubmit,\n * handleCancel,\n * handleSaveDraft,\n * setFormSubmission,\n * } = useFormSubmissionAutoSaveState({\n * form,\n * initialSubmission,\n * autoSaveKey,\n * onCancel,\n * onSubmit,\n * onSaveDraft,\n * })\n *\n * // This is just an example of how you could intercept\n * // the change event when a user enters/selects a value\n * // on the form.\n * const customSetFormSubmission = React.useCallback(\n * (formSubmission) => {\n * setFormSubmission((currentFormSubmission) => {\n * const newFormSubmission =\n * typeof formSubmission === 'function'\n * ? formSubmission(currentFormSubmission)\n * : formSubmission\n *\n * // This is where you can access the updated\n * // submission data or form definition.\n * // You could even change the form definition\n * // programmatically based on user inputs.\n * console.log(\n * 'A change has occurred to the submission',\n * newFormSubmission.submission,\n * )\n * newFormSubmission.definition.isInfoPage =\n * !newFormSubmission.submission.doesTheUserNeedToSubmit\n *\n * return newFormSubmission\n * })\n * },\n * [setFormSubmission],\n * )\n *\n * if (isLoadingAutoSaveSubmission) {\n * return <p>Checking for auto save data...</p>\n * }\n *\n * if (isAutoSaveSubmissionAvailable) {\n * return (\n * <>\n * <p>Do you want to use the auto save data?</p>\n * <button onClick={startNewSubmission}>No, start again</button>\n * <button onClick={continueAutoSaveSubmission}>\n * Yes, continue\n * </button>\n * </>\n * )\n * }\n *\n * return (\n * <OneBlinkFormControlled\n * {...props}\n * submission={submission}\n * definition={definition}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * setFormSubmission={customSetFormSubmission}\n * />\n * )\n * }\n *\n * export default React.memo(OneBlinkAutoSaveFormControlled)\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(\n props: OneBlinkFormBaseProps & OneBlinkFormControlledProps,\n) {\n return <OneBlinkFormBase {...props} isReadOnly={false} />\n})\n\n/**\n * Component for rendering a OneBlink Form. This component will render the\n * submit, cancel and save draft buttons but it is up to the developer to\n * implement what happens when those buttons are clicked.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { OneBlinkForm } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n * OneBlinkAppsError,\n * draftService,\n * submissionService,\n * IsOfflineContextProvider,\n * OneBlinkForm,\n * useIsMounted,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n * id: 1,\n * name: 'Name of Form',\n * description: '',\n * organisationId: 'abc123',\n * formsAppEnvironmentId: 1,\n * formsAppIds: [],\n * elements: [],\n * isAuthenticated: false,\n * isMultiPage: false,\n * isInfoPage: false,\n * publishStartDate: null,\n * publishEndDate: null,\n * postSubmissionAction: 'FORMS_LIBRARY',\n * submissionEvents: [],\n * tags: [],\n * }\n *\n * function FormContainer() {\n * const isMounted = useIsMounted()\n *\n * const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n * React.useState({\n * isSavingDraft: false,\n * saveDraftError: null,\n * })\n *\n * const [\n * { isSubmitting, submitError, formSubmissionResult },\n * setSubmitState,\n * ] = React.useState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: null,\n * })\n *\n * const handleSubmit = React.useCallback(\n * async (newFormSubmission: FormTypes.NewFormSubmission) => {\n * const formSubmission: FormSubmission = Object.assign(\n * {},\n * newFormSubmission,\n * {\n * formsAppId,\n * jobId: null,\n * externalId: null,\n * draftId: null,\n * preFillFormDataId: null,\n * },\n * )\n *\n * setSubmitState({\n * formSubmissionResult: null,\n * submitError: null,\n * isSubmitting: true,\n * })\n *\n * try {\n * const newFormSubmissionResult = await submissionService.submit({\n * formSubmission,\n * })\n * if (\n * newFormSubmissionResult.isOffline &&\n * !newFormSubmissionResult.isInPendingQueue\n * ) {\n * throw new OneBlinkAppsError(\n * 'You cannot submit this form while offline, please try again when connectivity is restored.',\n * {\n * isOffline: true,\n * },\n * )\n * }\n *\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: newFormSubmissionResult,\n * isSubmitting: false,\n * submitError: null,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: error,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleSaveDraft = React.useCallback(\n * async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n * const draftSubmission: FormTypes.DraftSubmission = {\n * ...newDraftSubmission,\n * formsAppId,\n * }\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: true,\n * })\n *\n * try {\n * await draftService.addDraft(\n * {\n * title: form.name,\n * formId: form.id,\n * externalId: null,\n * jobId: null,\n * },\n * draftSubmission,\n * )\n *\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: false,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: error,\n * isSavingDraft: false,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleCancel = React.useCallback(() => {\n * // handle cancel here...\n * }, [isMounted])\n *\n * if (isSubmitting) {\n * // Render submitting animation/loading\n * }\n *\n * if (submitError) {\n * // Render error while submitting\n * }\n *\n * if (isSavingDraft) {\n * // Render saving draft animation/loading\n * }\n *\n * if (saveDraftError) {\n * // Render error while saving draft\n * }\n *\n * if (formSubmissionResult) {\n * // Render submission success\n * }\n *\n * return (\n * <OneBlinkForm\n * captchaSiteKey={captchaSiteKey}\n * googleMapsApiKey={googleMapsApiKey}\n * formsAppId={formsAppId}\n * form={form}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * attachmentRetentionInDays={1}\n * audience=\"SUBMITTER\"\n * />\n * )\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <FormContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({\n form,\n initialSubmission,\n resumeAtElement,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n ...props\n}: OneBlinkFormBaseProps &\n OneBlinkFormUncontrolledProps & {\n /** The element to resume the form at. */\n resumeAtElement?: FormTypes.FormElement\n resumeSectionState?: SectionState\n resumePreviousElapsedDurationSeconds?: number\n }) {\n const [getCurrentSubmissionDuration] = useFormSubmissionDuration(\n resumePreviousElapsedDurationSeconds,\n )\n const [\n {\n definition,\n submission,\n lastElementUpdated,\n executedLookups,\n sectionState,\n },\n setFormSubmission,\n ] = useFormSubmissionState(\n form,\n initialSubmission,\n resumeAtElement,\n resumeSectionState,\n )\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n definition={definition}\n submission={submission}\n setFormSubmission={setFormSubmission}\n lastElementUpdated={lastElementUpdated}\n executedLookups={executedLookups}\n sectionState={sectionState}\n getCurrentSubmissionDuration={getCurrentSubmissionDuration}\n />\n )\n})\n\nexport { OneBlinkFormControlled, OneBlinkFormUncontrolled }\n"]}
1
+ {"version":3,"file":"OneBlinkForm.js","sourceRoot":"","sources":["../src/OneBlinkForm.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,gBAIN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,MAAM,gCAAgC,CAAA;AACnE,OAAO,yBAAyB,MAAM,mCAAmC,CAAA;AAiBzE,MAAM,IAAI,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;AAQrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmUG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,sBAAsB,CACvE,KAA2C;IAE3C,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,KAAK,UAAU,CAAA;IAEhD,OAAO,CACL,KAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAC5C,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,GAC5C,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2NG;AACH,MAAM,wBAAwB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAAC,EAC5E,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,oCAAoC,EACpC,GAAG,KAAK,EAOP;IACD,MAAM,CAAC,4BAA4B,CAAC,GAAG,yBAAyB,CAC9D,oCAAoC,CACrC,CAAA;IACD,MAAM,CACJ,EACE,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,YAAY,GACb,EACD,iBAAiB,EAClB,GAAG,sBAAsB,CACxB,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,CACnB,CAAA;IACD,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,KAAK,UAAU,CAAA;IAEhD,OAAO,CACL,KAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,4BAA4B,EAAE,4BAA4B,EAC1D,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAC5C,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,GAC5C,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAMF,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport OneBlinkFormBase, {\n OneBlinkFormBaseProps,\n OneBlinkFormControlledProps,\n OneBlinkFormUncontrolledProps,\n} from './OneBlinkFormBase'\nimport useFormSubmissionState from './hooks/useFormSubmissionState'\nimport useFormSubmissionDuration from './hooks/useFormSubmissionDuration'\nimport { SectionState } from './types/form'\n\ntype OneBlinkApproverFormBaseProps = Omit<\n OneBlinkFormBaseProps,\n 'audience' | 'onCancel' | 'onSaveDraft' | 'onSubmit'\n> & {\n audience: 'APPROVER'\n}\n\ntype OneBlinkFormAudienceProps =\n | (OneBlinkFormBaseProps & { audience: 'SUBMITTER' })\n | OneBlinkApproverFormBaseProps\n\nexport type OneBlinkFormControlledComponentProps =\n OneBlinkFormControlledProps & OneBlinkFormAudienceProps\n\nconst noop = () => {}\n\nexport {\n OneBlinkFormBaseProps,\n OneBlinkFormControlledProps,\n OneBlinkFormUncontrolledProps,\n}\n\n/**\n * Similar to {@link OneBlinkForm}, however requires props to control the\n * `definition` and `submission` values.\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n * OneBlinkAppsError,\n * draftService,\n * submissionService,\n * IsOfflineContextProvider,\n * OneBlinkFormControlled,\n * useIsMounted,\n * useFormSubmissionState,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n * id: 1,\n * name: 'Name of Form',\n * description: '',\n * organisationId: 'abc123',\n * formsAppEnvironmentId: 1,\n * formsAppIds: [],\n * elements: [],\n * isAuthenticated: false,\n * isMultiPage: false,\n * isInfoPage: false,\n * publishStartDate: null,\n * publishEndDate: null,\n * postSubmissionAction: 'FORMS_LIBRARY',\n * submissionEvents: [],\n * tags: [],\n * }\n * const initialSubmission: Record<string, unknown> = {\n * data: 1,\n * }\n *\n * function FormContainer() {\n * const isMounted = useIsMounted()\n *\n * const [{ definition, submission }, setFormSubmission] =\n * useFormSubmissionState(form, initialSubmission)\n *\n * const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n * React.useState({\n * isSavingDraft: false,\n * saveDraftError: null,\n * })\n *\n * const [\n * { isSubmitting, submitError, formSubmissionResult },\n * setSubmitState,\n * ] = React.useState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: null,\n * })\n *\n * const handleSubmit = React.useCallback(\n * async (newFormSubmission: FormTypes.NewFormSubmission) => {\n * const formSubmission: FormSubmission = Object.assign(\n * {},\n * newFormSubmission,\n * {\n * formsAppId,\n * jobId: null,\n * externalId: null,\n * draftId: null,\n * preFillFormDataId: null,\n * },\n * )\n *\n * setSubmitState({\n * formSubmissionResult: null,\n * submitError: null,\n * isSubmitting: true,\n * })\n *\n * try {\n * const newFormSubmissionResult = await submissionService.submit({\n * formSubmission,\n * })\n * if (\n * newFormSubmissionResult.isOffline &&\n * !newFormSubmissionResult.isInPendingQueue\n * ) {\n * throw new OneBlinkAppsError(\n * 'You cannot submit this form while offline, please try again when connectivity is restored.',\n * {\n * isOffline: true,\n * },\n * )\n * }\n *\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: newFormSubmissionResult,\n * isSubmitting: false,\n * submitError: null,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: error,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleSaveDraft = React.useCallback(\n * async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n * const draftSubmission: FormTypes.DraftSubmission = {\n * ...newDraftSubmission,\n * formsAppId,\n * }\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: true,\n * })\n *\n * try {\n * await draftService.addDraft(\n * {\n * title: form.name,\n * formId: form.id,\n * externalId: null,\n * jobId: null,\n * },\n * draftSubmission,\n * )\n *\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: false,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: error,\n * isSavingDraft: false,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleCancel = React.useCallback(() => {\n * // handle cancel here...\n * }, [])\n *\n * if (isSubmitting) {\n * // Render submitting animation/loading\n * }\n *\n * if (submitError) {\n * // Render error while submitting\n * }\n *\n * if (isSavingDraft) {\n * // Render saving draft animation/loading\n * }\n *\n * if (saveDraftError) {\n * // Render error while saving draft\n * }\n *\n * if (formSubmissionResult) {\n * // Render submission success\n * }\n *\n * return (\n * <OneBlinkFormControlled\n * captchaSiteKey={captchaSiteKey}\n * googleMapsApiKey={googleMapsApiKey}\n * formsAppId={formsAppId}\n * definition={definition}\n * submission={submission}\n * setFormSubmission={setFormSubmission}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * audience=\"SUBMITTER\"\n * />\n * )\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <FormContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * #### Implementing Controlled Auto Save\n *\n * The {@link OneBlinkAutoSaveForm} component does not offer props to allow for a\n * controlled form (i.e. having access to `submission` and `definition` values).\n * To implement a controlled version of the `<OneBlinkAutoSaveForm />`\n * component, use the example component below.\n *\n * ```tsx\n * import * as React from 'react'\n * import {\n * OneBlinkAutoSaveForm,\n * OneBlinkFormControlled,\n * useFormSubmissionAutoSaveState,\n * } from '@oneblink/apps-react'\n *\n * function OneBlinkAutoSaveFormControlled({\n * form,\n * initialSubmission,\n * autoSaveKey,\n * onCancel,\n * onSubmit,\n * onSaveDraft,\n * ...props\n * }: React.ComponentProps<typeof OneBlinkAutoSaveForm>) {\n * const {\n * definition,\n * submission,\n * isLoadingAutoSaveSubmission,\n * isAutoSaveSubmissionAvailable,\n * startNewSubmission,\n * continueAutoSaveSubmission,\n * handleSubmit,\n * handleCancel,\n * handleSaveDraft,\n * setFormSubmission,\n * } = useFormSubmissionAutoSaveState({\n * form,\n * initialSubmission,\n * autoSaveKey,\n * onCancel,\n * onSubmit,\n * onSaveDraft,\n * })\n *\n * // This is just an example of how you could intercept\n * // the change event when a user enters/selects a value\n * // on the form.\n * const customSetFormSubmission = React.useCallback(\n * (formSubmission) => {\n * setFormSubmission((currentFormSubmission) => {\n * const newFormSubmission =\n * typeof formSubmission === 'function'\n * ? formSubmission(currentFormSubmission)\n * : formSubmission\n *\n * // This is where you can access the updated\n * // submission data or form definition.\n * // You could even change the form definition\n * // programmatically based on user inputs.\n * console.log(\n * 'A change has occurred to the submission',\n * newFormSubmission.submission,\n * )\n * newFormSubmission.definition.isInfoPage =\n * !newFormSubmission.submission.doesTheUserNeedToSubmit\n *\n * return newFormSubmission\n * })\n * },\n * [setFormSubmission],\n * )\n *\n * if (isLoadingAutoSaveSubmission) {\n * return <p>Checking for auto save data...</p>\n * }\n *\n * if (isAutoSaveSubmissionAvailable) {\n * return (\n * <>\n * <p>Do you want to use the auto save data?</p>\n * <button onClick={startNewSubmission}>No, start again</button>\n * <button onClick={continueAutoSaveSubmission}>\n * Yes, continue\n * </button>\n * </>\n * )\n * }\n *\n * return (\n * <OneBlinkFormControlled\n * {...props}\n * submission={submission}\n * definition={definition}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * setFormSubmission={customSetFormSubmission}\n * />\n * )\n * }\n *\n * export default React.memo(OneBlinkAutoSaveFormControlled)\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(\n props: OneBlinkFormControlledComponentProps,\n) {\n const isApprover = props.audience === 'APPROVER'\n\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n onCancel={isApprover ? noop : props.onCancel}\n onSubmit={isApprover ? noop : props.onSubmit}\n />\n )\n})\n\n/**\n * Component for rendering a OneBlink Form. This component will render the\n * submit, cancel and save draft buttons but it is up to the developer to\n * implement what happens when those buttons are clicked.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { OneBlinkForm } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n * OneBlinkAppsError,\n * draftService,\n * submissionService,\n * IsOfflineContextProvider,\n * OneBlinkForm,\n * useIsMounted,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n * id: 1,\n * name: 'Name of Form',\n * description: '',\n * organisationId: 'abc123',\n * formsAppEnvironmentId: 1,\n * formsAppIds: [],\n * elements: [],\n * isAuthenticated: false,\n * isMultiPage: false,\n * isInfoPage: false,\n * publishStartDate: null,\n * publishEndDate: null,\n * postSubmissionAction: 'FORMS_LIBRARY',\n * submissionEvents: [],\n * tags: [],\n * }\n *\n * function FormContainer() {\n * const isMounted = useIsMounted()\n *\n * const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n * React.useState({\n * isSavingDraft: false,\n * saveDraftError: null,\n * })\n *\n * const [\n * { isSubmitting, submitError, formSubmissionResult },\n * setSubmitState,\n * ] = React.useState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: null,\n * })\n *\n * const handleSubmit = React.useCallback(\n * async (newFormSubmission: FormTypes.NewFormSubmission) => {\n * const formSubmission: FormSubmission = Object.assign(\n * {},\n * newFormSubmission,\n * {\n * formsAppId,\n * jobId: null,\n * externalId: null,\n * draftId: null,\n * preFillFormDataId: null,\n * },\n * )\n *\n * setSubmitState({\n * formSubmissionResult: null,\n * submitError: null,\n * isSubmitting: true,\n * })\n *\n * try {\n * const newFormSubmissionResult = await submissionService.submit({\n * formSubmission,\n * })\n * if (\n * newFormSubmissionResult.isOffline &&\n * !newFormSubmissionResult.isInPendingQueue\n * ) {\n * throw new OneBlinkAppsError(\n * 'You cannot submit this form while offline, please try again when connectivity is restored.',\n * {\n * isOffline: true,\n * },\n * )\n * }\n *\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: newFormSubmissionResult,\n * isSubmitting: false,\n * submitError: null,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: error,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleSaveDraft = React.useCallback(\n * async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n * const draftSubmission: FormTypes.DraftSubmission = {\n * ...newDraftSubmission,\n * formsAppId,\n * }\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: true,\n * })\n *\n * try {\n * await draftService.addDraft(\n * {\n * title: form.name,\n * formId: form.id,\n * externalId: null,\n * jobId: null,\n * },\n * draftSubmission,\n * )\n *\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: false,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: error,\n * isSavingDraft: false,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleCancel = React.useCallback(() => {\n * // handle cancel here...\n * }, [isMounted])\n *\n * if (isSubmitting) {\n * // Render submitting animation/loading\n * }\n *\n * if (submitError) {\n * // Render error while submitting\n * }\n *\n * if (isSavingDraft) {\n * // Render saving draft animation/loading\n * }\n *\n * if (saveDraftError) {\n * // Render error while saving draft\n * }\n *\n * if (formSubmissionResult) {\n * // Render submission success\n * }\n *\n * return (\n * <OneBlinkForm\n * captchaSiteKey={captchaSiteKey}\n * googleMapsApiKey={googleMapsApiKey}\n * formsAppId={formsAppId}\n * form={form}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * attachmentRetentionInDays={1}\n * audience=\"SUBMITTER\"\n * />\n * )\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <FormContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({\n form,\n initialSubmission,\n resumeAtElement,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n ...props\n}: OneBlinkFormUncontrolledProps &\n OneBlinkFormAudienceProps & {\n /** The element to resume the form at. */\n resumeAtElement?: FormTypes.FormElement\n resumeSectionState?: SectionState\n resumePreviousElapsedDurationSeconds?: number\n }) {\n const [getCurrentSubmissionDuration] = useFormSubmissionDuration(\n resumePreviousElapsedDurationSeconds,\n )\n const [\n {\n definition,\n submission,\n lastElementUpdated,\n executedLookups,\n sectionState,\n },\n setFormSubmission,\n ] = useFormSubmissionState(\n form,\n initialSubmission,\n resumeAtElement,\n resumeSectionState,\n )\n const isApprover = props.audience === 'APPROVER'\n\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n definition={definition}\n submission={submission}\n setFormSubmission={setFormSubmission}\n lastElementUpdated={lastElementUpdated}\n executedLookups={executedLookups}\n sectionState={sectionState}\n getCurrentSubmissionDuration={getCurrentSubmissionDuration}\n onCancel={isApprover ? noop : props.onCancel}\n onSubmit={isApprover ? noop : props.onSubmit}\n />\n )\n})\n\nexport type OneBlinkFormProps = React.ComponentProps<\n typeof OneBlinkFormUncontrolled\n>\n\nexport { OneBlinkFormControlled, OneBlinkFormUncontrolled }\n"]}
@@ -247,7 +247,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
247
247
  const { validate } = useFormValidation(pages);
248
248
  const recaptchaType = React.useMemo(() => captchaType !== null && captchaType !== void 0 ? captchaType : 'CHECKBOX', [captchaType]);
249
249
  const formElementsValidation = React.useMemo(() => !isReadOnly
250
- ? validate(submission, formElementsConditionallyShown, executedLookups !== null && executedLookups !== void 0 ? executedLookups : {}, recaptchaType, isOffline)
250
+ ? validate(submission, formElementsConditionallyShown, executedLookups !== null && executedLookups !== void 0 ? executedLookups : {}, recaptchaType, isOffline, audience)
251
251
  : undefined, [
252
252
  isReadOnly,
253
253
  validate,
@@ -256,6 +256,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
256
256
  executedLookups,
257
257
  recaptchaType,
258
258
  isOffline,
259
+ audience,
259
260
  ]);
260
261
  React.useEffect(() => {
261
262
  if (!formElementsValidation) {
@@ -473,7 +474,11 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
473
474
  ]);
474
475
  const handleSubmit = React.useCallback(async (event, continueWhilstAttachmentsAreUploading) => {
475
476
  event.preventDefault();
476
- if (disabled || isReadOnly)
477
+ // Approvers are not shown a submit button, so reaching here means the
478
+ // browser submitted the form implicitly (e.g. Enter in a text input).
479
+ // Approving is driven separately, and continuing would send a
480
+ // submission analytics event and display validation messages.
481
+ if (disabled || isReadOnly || audience === 'APPROVER')
477
482
  return;
478
483
  setHasAttemptedSubmit(true);
479
484
  setIsPreparingToSubmit(true);
@@ -513,6 +518,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
513
518
  }, [
514
519
  disabled,
515
520
  isReadOnly,
521
+ audience,
516
522
  prepareSubmission,
517
523
  allowNavigation,
518
524
  definition,
@@ -769,7 +775,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
769
775
  'is-completed': currentPageIndex > index,
770
776
  'has-background-danger': currentPage.id !== page.id &&
771
777
  checkDisplayPageError(page),
772
- }) }, 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
778
+ }) }, 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
773
779
  ? ''
774
780
  : '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 }, {
775
781
  'ob-button-submit-is-disabled': submissionConditionallyEnabled,
@@ -778,7 +784,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
778
784
  isPreparingToSubmit ||
779
785
  !submissionConditionallyEnabled, children: _jsx(CustomisableButtonInner, { label: isInfoPage
780
786
  ? 'Done'
781
- : ((_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) => {
787
+ : ((_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 && audience !== 'APPROVER' && (_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) => {
782
788
  setPromptOfflineSubmissionAttempt(false);
783
789
  handleSubmit(e, false);
784
790
  }, 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 &&