@oneblink/apps-react 6.10.0 → 6.11.0-beta.10

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 (47) hide show
  1. package/dist/OneBlinkFormBase.js +4 -3
  2. package/dist/OneBlinkFormBase.js.map +1 -1
  3. package/dist/PaymentReceipt.js +10 -2
  4. package/dist/PaymentReceipt.js.map +1 -1
  5. package/dist/components/calendar-bookings/CalendarBookingsForm.js +15 -8
  6. package/dist/components/calendar-bookings/CalendarBookingsForm.js.map +1 -1
  7. package/dist/components/receipts/ReceiptList.js +4 -2
  8. package/dist/components/receipts/ReceiptList.js.map +1 -1
  9. package/dist/components/renderer/LookupButton.js +1 -1
  10. package/dist/components/renderer/LookupButton.js.map +1 -1
  11. package/dist/components/renderer/attachments/FileCard.js +1 -1
  12. package/dist/components/renderer/attachments/FileCard.js.map +1 -1
  13. package/dist/form-elements/FormElementCaptcha.d.ts +1 -1
  14. package/dist/form-elements/FormElementCaptcha.js +9 -5
  15. package/dist/form-elements/FormElementCaptcha.js.map +1 -1
  16. package/dist/form-elements/FormElementFiles.js +1 -1
  17. package/dist/form-elements/FormElementFiles.js.map +1 -1
  18. package/dist/form-elements/FormElementSection.js +1 -1
  19. package/dist/form-elements/FormElementSection.js.map +1 -1
  20. package/dist/form-elements/OptionButton.js +10 -2
  21. package/dist/form-elements/OptionButton.js.map +1 -1
  22. package/dist/hooks/useFormValidation.d.ts +1 -1
  23. package/dist/hooks/useFormValidation.js +10 -6
  24. package/dist/hooks/useFormValidation.js.map +1 -1
  25. package/dist/hooks/usePages.js +1 -1
  26. package/dist/hooks/usePages.js.map +1 -1
  27. package/dist/services/form-validation/extensions.d.ts +28 -0
  28. package/dist/services/form-validation/extensions.js +97 -0
  29. package/dist/services/form-validation/extensions.js.map +1 -0
  30. package/dist/services/form-validation/validate-dot-js.d.ts +63 -0
  31. package/dist/services/form-validation/validate-dot-js.js +328 -0
  32. package/dist/services/form-validation/validate-dot-js.js.map +1 -0
  33. package/dist/services/form-validation/validateSubmission.d.ts +11 -0
  34. package/dist/services/form-validation/validateSubmission.js +503 -0
  35. package/dist/services/form-validation/validateSubmission.js.map +1 -0
  36. package/dist/services/form-validation/validators.d.ts +13 -0
  37. package/dist/services/form-validation/validators.js +70 -0
  38. package/dist/services/form-validation/validators.js.map +1 -0
  39. package/dist/services/generateCivicaNameRecordElements.d.ts +1 -1
  40. package/dist/services/generateCivicaNameRecordElements.js.map +1 -1
  41. package/dist/styles/option-buttons.scss +5 -0
  42. package/dist/styles.css +6 -0
  43. package/dist/styles.scss +1 -0
  44. package/package.json +5 -5
  45. package/dist/services/form-validation.d.ts +0 -10
  46. package/dist/services/form-validation.js +0 -604
  47. package/dist/services/form-validation.js.map +0 -1
@@ -52,14 +52,14 @@ function NylasBookingForm({ submissionId, name, email, configurationId, sessionI
52
52
  }));
53
53
  }
54
54
  }, [onDone]);
55
- const handleConfirmedBooking = React.useCallback(async () => {
55
+ const handleConfirmedBooking = React.useCallback(async (schedulingBooking) => {
56
56
  setPostSubmissionState((currentState) => ({
57
57
  ...currentState,
58
58
  isConfirmingBooking: true,
59
59
  confirmingBookingError: null,
60
60
  }));
61
61
  try {
62
- const formSubmissionResult = await onBookingConfirmed();
62
+ const formSubmissionResult = await onBookingConfirmed(schedulingBooking);
63
63
  setPostSubmissionState((currentState) => ({
64
64
  ...currentState,
65
65
  formSubmissionResult,
@@ -96,14 +96,21 @@ function NylasBookingForm({ submissionId, name, email, configurationId, sessionI
96
96
  React.createElement("div", { className: "ob-scheduling-booking-form" },
97
97
  !(formSubmissionResult === null || formSubmissionResult === void 0 ? void 0 : formSubmissionResult.payment) && (React.createElement(NylasScheduling, { eventOverrides: {
98
98
  timeslotConfirmed: onTimeSlotConfirmed,
99
- bookedEventInfo: async (event) => {
100
- var _a;
99
+ async bookedEventInfo(event) {
100
+ var _a, _b;
101
+ console.log('bookedEventInfo event', event);
101
102
  event.preventDefault();
102
- if (event.detail.error) {
103
- setBookingError((_a = event.detail.error.message) !== null && _a !== void 0 ? _a : 'Calendar Booking Error');
103
+ if ('error' in event.detail) {
104
+ setBookingError((_b = (_a = event.detail.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : 'Calendar Booking Error');
104
105
  }
105
- else {
106
- await handleConfirmedBooking();
106
+ else if ('data' in event.detail) {
107
+ await handleConfirmedBooking({
108
+ submissionId,
109
+ startTime: new Date(event.detail.data.start_time * 1000),
110
+ endTime: new Date(event.detail.data.end_time * 1000),
111
+ location: event.detail.data.location,
112
+ isReschedule: false,
113
+ });
107
114
  }
108
115
  },
109
116
  }, bookingInfo: {
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarBookingsForm.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { Collapse, Fade } from '@mui/material'\nimport {\n schedulingService,\n submissionService,\n OneBlinkAppsError,\n} from '@oneblink/apps'\nimport clsx from 'clsx'\nimport { Receipt } from '../receipts'\nimport ErrorModal from './ErrorModal'\nimport OnLoading from '../renderer/OnLoading'\nimport CalendarBookingsContainer from './CalendarBookingsContainer'\nimport useCalendarBookings from './CalendarBookingsProvider'\n\nfunction NylasBookingForm({\n submissionId,\n name,\n email,\n configurationId,\n sessionId,\n onBookingConfirmed,\n onDone,\n}: Awaited<\n ReturnType<typeof schedulingService.createNylasNewBookingSession>\n> & {\n submissionId: string\n onDone: (\n formSubmissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n}) {\n const { setBookingError, onTimeSlotConfirmed } = useCalendarBookings()\n\n const [\n {\n formSubmissionResult,\n isRunningPostSubmissionAction,\n postSubmissionError,\n isConfirmingBooking,\n confirmingBookingError,\n },\n setPostSubmissionState,\n ] = React.useState<{\n formSubmissionResult: submissionService.FormSubmissionResult | null\n isRunningPostSubmissionAction: boolean\n postSubmissionError: OneBlinkAppsError | null\n isConfirmingBooking: boolean\n confirmingBookingError: OneBlinkAppsError | null\n }>({\n formSubmissionResult: null,\n isRunningPostSubmissionAction: false,\n postSubmissionError: null,\n isConfirmingBooking: false,\n confirmingBookingError: null,\n })\n const clearPostSubmissionError = React.useCallback(() => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n postSubmissionError: null,\n }))\n }, [])\n const clearConfirmingBookingError = React.useCallback(() => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n confirmingBookingError: null,\n }))\n }, [])\n\n const executePostSubmissionAction = React.useCallback(\n async (formSubmissionResult: submissionService.FormSubmissionResult) => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n formSubmissionResult,\n isRunningPostSubmissionAction: true,\n postSubmissionError: null,\n }))\n\n try {\n await onDone({\n ...formSubmissionResult,\n scheduling: null,\n })\n } catch (error) {\n console.warn('Error while running post submission action', error)\n setPostSubmissionState((currentState) => ({\n ...currentState,\n formSubmissionResult,\n isRunningPostSubmissionAction: false,\n postSubmissionError: error as OneBlinkAppsError,\n }))\n }\n },\n [onDone],\n )\n\n const handleConfirmedBooking = React.useCallback(async () => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n isConfirmingBooking: true,\n confirmingBookingError: null,\n }))\n\n try {\n const formSubmissionResult = await onBookingConfirmed()\n setPostSubmissionState((currentState) => ({\n ...currentState,\n formSubmissionResult,\n }))\n if (formSubmissionResult.payment) {\n setTimeout(async () => {\n executePostSubmissionAction(formSubmissionResult)\n }, 2000)\n } else {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n isConfirmingBooking: false,\n formSubmissionResult,\n }))\n }\n } catch (error) {\n console.warn('Error while handling confirmed booking', error)\n setPostSubmissionState((currentState) => ({\n ...currentState,\n isConfirmingBooking: false,\n confirmingBookingError: error as OneBlinkAppsError,\n }))\n }\n }, [onBookingConfirmed, executePostSubmissionAction])\n\n return (\n <>\n <Collapse in={isConfirmingBooking}>\n <div className=\"has-margin-top-1\">\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\" />\n <Fade in={!!formSubmissionResult?.payment}>\n <span>Redirecting to payment</span>\n </Fade>\n </div>\n </div>\n </Collapse>\n\n <div className=\"ob-scheduling-booking-form\">\n {!formSubmissionResult?.payment && (\n <NylasScheduling\n eventOverrides={{\n timeslotConfirmed: onTimeSlotConfirmed,\n bookedEventInfo: async (event) => {\n event.preventDefault()\n\n if (event.detail.error) {\n setBookingError(\n event.detail.error.message ?? 'Calendar Booking Error',\n )\n } else {\n await handleConfirmedBooking()\n }\n },\n }}\n bookingInfo={{\n primaryParticipant: {\n name: name ?? '',\n email: email ?? '',\n },\n additionalFields: {\n submissionId: {\n value: submissionId,\n type: 'text',\n },\n },\n }}\n enableUserFeedback={false}\n configurationId={configurationId}\n sessionId={sessionId}\n nylasBranding={false}\n />\n )}\n\n {formSubmissionResult && !formSubmissionResult.payment && (\n <Receipt\n className=\"ob-scheduling-receipt\"\n containerClassName=\"ob-scheduling-receipt__container\"\n >\n <div className=\"buttons\">\n <button\n type=\"button\"\n className={clsx(\n 'is-primary button ob-button ob-scheduling-receipt__button ob-scheduling-receipt__okay-button cypress-scheduling-receipt-okay-button',\n { 'is-loading': isRunningPostSubmissionAction },\n )}\n disabled={isRunningPostSubmissionAction}\n onClick={() =>\n executePostSubmissionAction(formSubmissionResult)\n }\n >\n Done\n </button>\n </div>\n </Receipt>\n )}\n\n <ErrorModal\n error={postSubmissionError}\n onClose={clearPostSubmissionError}\n />\n\n <ErrorModal\n error={confirmingBookingError}\n onClose={clearConfirmingBookingError}\n />\n </div>\n </>\n )\n}\n\nfunction CalendarBookingsForm({\n onDone,\n}: {\n onDone: (\n formSubmissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n}) {\n return (\n <CalendarBookingsContainer\n fetchConfiguration={schedulingService.createNylasNewBookingSession}\n >\n {(props) => <NylasBookingForm {...props} onDone={onDone} />}\n </CalendarBookingsContainer>\n )\n}\n\nexport default React.memo(CalendarBookingsForm)\n"]}
1
+ {"version":3,"file":"CalendarBookingsForm.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { NylasSchedulerResponse, NylasEvent } from '@nylas/web-elements'\nimport { Collapse, Fade } from '@mui/material'\nimport {\n schedulingService,\n submissionService,\n OneBlinkAppsError,\n} from '@oneblink/apps'\nimport clsx from 'clsx'\nimport { Receipt } from '../receipts'\nimport ErrorModal from './ErrorModal'\nimport OnLoading from '../renderer/OnLoading'\nimport CalendarBookingsContainer from './CalendarBookingsContainer'\nimport useCalendarBookings from './CalendarBookingsProvider'\n\nfunction NylasBookingForm({\n submissionId,\n name,\n email,\n configurationId,\n sessionId,\n onBookingConfirmed,\n onDone,\n}: Awaited<\n ReturnType<typeof schedulingService.createNylasNewBookingSession>\n> & {\n submissionId: string\n onDone: (\n formSubmissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n}) {\n const { setBookingError, onTimeSlotConfirmed } = useCalendarBookings()\n\n const [\n {\n formSubmissionResult,\n isRunningPostSubmissionAction,\n postSubmissionError,\n isConfirmingBooking,\n confirmingBookingError,\n },\n setPostSubmissionState,\n ] = React.useState<{\n formSubmissionResult: submissionService.FormSubmissionResult | null\n isRunningPostSubmissionAction: boolean\n postSubmissionError: OneBlinkAppsError | null\n isConfirmingBooking: boolean\n confirmingBookingError: OneBlinkAppsError | null\n }>({\n formSubmissionResult: null,\n isRunningPostSubmissionAction: false,\n postSubmissionError: null,\n isConfirmingBooking: false,\n confirmingBookingError: null,\n })\n const clearPostSubmissionError = React.useCallback(() => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n postSubmissionError: null,\n }))\n }, [])\n const clearConfirmingBookingError = React.useCallback(() => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n confirmingBookingError: null,\n }))\n }, [])\n\n const executePostSubmissionAction = React.useCallback(\n async (formSubmissionResult: submissionService.FormSubmissionResult) => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n formSubmissionResult,\n isRunningPostSubmissionAction: true,\n postSubmissionError: null,\n }))\n\n try {\n await onDone({\n ...formSubmissionResult,\n scheduling: null,\n })\n } catch (error) {\n console.warn('Error while running post submission action', error)\n setPostSubmissionState((currentState) => ({\n ...currentState,\n formSubmissionResult,\n isRunningPostSubmissionAction: false,\n postSubmissionError: error as OneBlinkAppsError,\n }))\n }\n },\n [onDone],\n )\n\n const handleConfirmedBooking = React.useCallback(\n async (schedulingBooking: schedulingService.SchedulingBooking) => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n isConfirmingBooking: true,\n confirmingBookingError: null,\n }))\n\n try {\n const formSubmissionResult = await onBookingConfirmed(schedulingBooking)\n setPostSubmissionState((currentState) => ({\n ...currentState,\n formSubmissionResult,\n }))\n if (formSubmissionResult.payment) {\n setTimeout(async () => {\n executePostSubmissionAction(formSubmissionResult)\n }, 2000)\n } else {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n isConfirmingBooking: false,\n formSubmissionResult,\n }))\n }\n } catch (error) {\n console.warn('Error while handling confirmed booking', error)\n setPostSubmissionState((currentState) => ({\n ...currentState,\n isConfirmingBooking: false,\n confirmingBookingError: error as OneBlinkAppsError,\n }))\n }\n },\n [onBookingConfirmed, executePostSubmissionAction],\n )\n\n return (\n <>\n <Collapse in={isConfirmingBooking}>\n <div className=\"has-margin-top-1\">\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\" />\n <Fade in={!!formSubmissionResult?.payment}>\n <span>Redirecting to payment</span>\n </Fade>\n </div>\n </div>\n </Collapse>\n\n <div className=\"ob-scheduling-booking-form\">\n {!formSubmissionResult?.payment && (\n <NylasScheduling\n eventOverrides={{\n timeslotConfirmed: onTimeSlotConfirmed,\n async bookedEventInfo(\n event: CustomEvent<\n NylasSchedulerResponse<\n NylasEvent & {\n event_id: string\n additional_guests: Array<{\n name: string\n email: string\n }>\n guest: {\n name: string\n email: string\n }\n additional_fields: Record<string, unknown>\n start_time: number\n end_time: number\n email_language: string\n timezone: string\n location?: string\n }\n >\n >,\n ) {\n console.log('bookedEventInfo event', event)\n\n event.preventDefault()\n\n if ('error' in event.detail) {\n setBookingError(\n event.detail.error?.message ?? 'Calendar Booking Error',\n )\n } else if ('data' in event.detail) {\n await handleConfirmedBooking({\n submissionId,\n startTime: new Date(event.detail.data.start_time * 1000),\n endTime: new Date(event.detail.data.end_time * 1000),\n location: event.detail.data.location,\n isReschedule: false,\n })\n }\n },\n }}\n bookingInfo={{\n primaryParticipant: {\n name: name ?? '',\n email: email ?? '',\n },\n additionalFields: {\n submissionId: {\n value: submissionId,\n type: 'text',\n },\n },\n }}\n enableUserFeedback={false}\n configurationId={configurationId}\n sessionId={sessionId}\n nylasBranding={false}\n />\n )}\n\n {formSubmissionResult && !formSubmissionResult.payment && (\n <Receipt\n className=\"ob-scheduling-receipt\"\n containerClassName=\"ob-scheduling-receipt__container\"\n >\n <div className=\"buttons\">\n <button\n type=\"button\"\n className={clsx(\n 'is-primary button ob-button ob-scheduling-receipt__button ob-scheduling-receipt__okay-button cypress-scheduling-receipt-okay-button',\n { 'is-loading': isRunningPostSubmissionAction },\n )}\n disabled={isRunningPostSubmissionAction}\n onClick={() =>\n executePostSubmissionAction(formSubmissionResult)\n }\n >\n Done\n </button>\n </div>\n </Receipt>\n )}\n\n <ErrorModal\n error={postSubmissionError}\n onClose={clearPostSubmissionError}\n />\n\n <ErrorModal\n error={confirmingBookingError}\n onClose={clearConfirmingBookingError}\n />\n </div>\n </>\n )\n}\n\nfunction CalendarBookingsForm({\n onDone,\n}: {\n onDone: (\n formSubmissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n}) {\n return (\n <CalendarBookingsContainer\n fetchConfiguration={schedulingService.createNylasNewBookingSession}\n >\n {(props) => <NylasBookingForm {...props} onDone={onDone} />}\n </CalendarBookingsContainer>\n )\n}\n\nexport default React.memo(CalendarBookingsForm)\n"]}
@@ -5,8 +5,10 @@ function ReceiptList({ successIconClassName, warningIconClassName, warningMessag
5
5
  return (React.createElement("div", { className: "ob-list has-dividers has-shadow has-margin-bottom-4" },
6
6
  React.createElement("div", { className: "ob-list__item" },
7
7
  React.createElement("div", { className: "ob-list__content-wrapper" },
8
- React.createElement("div", { className: "ob-list__content" }, !warningMessage ? (React.createElement(MaterialIcon, { className: clsx('has-text-centered has-text-success icon-x-large', successIconClassName) }, "check_circle_outline")) : (React.createElement(React.Fragment, null,
9
- React.createElement(MaterialIcon, { className: clsx('has-text-centered has-text-danger icon-x-large', warningIconClassName) }, "warning"),
8
+ React.createElement("div", { className: "ob-list__content" }, !warningMessage ? (React.createElement("p", { className: "has-text-centered" },
9
+ React.createElement(MaterialIcon, { className: clsx('has-text-success icon-x-large', successIconClassName) }, "check_circle_outline"))) : (React.createElement(React.Fragment, null,
10
+ React.createElement("p", { className: "has-text-centered" },
11
+ React.createElement(MaterialIcon, { className: clsx('has-text-danger icon-x-large', warningIconClassName) }, "warning")),
10
12
  React.createElement("p", { className: clsx('has-text-centered', warningMessageClassName) }, warningMessage)))))),
11
13
  children));
12
14
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,WAAW,CAAC,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,QAAQ,GACF;IACN,OAAO,CACL,6BAAK,SAAS,EAAC,qDAAqD;QAClE,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,iDAAiD,EACjD,oBAAoB,CACrB,2BAGY,CAChB,CAAC,CAAC,CAAC,CACF;oBACE,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD,oBAAoB,CACrB,cAGY;oBAEf,2BACE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,IAE5D,cAAc,CACb,CACH,CACJ,CACG,CACF,CACF;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n successIconClassName: string\n warningIconClassName?: string\n warningMessageClassName?: string\n warningMessage?: string\n children: React.ReactNode\n}\n\nfunction ReceiptList({\n successIconClassName,\n warningIconClassName,\n warningMessageClassName,\n warningMessage,\n children,\n}: Props) {\n return (\n <div className=\"ob-list has-dividers has-shadow has-margin-bottom-4\">\n <div className=\"ob-list__item\">\n <div className=\"ob-list__content-wrapper\">\n <div className=\"ob-list__content\">\n {!warningMessage ? (\n <MaterialIcon\n className={clsx(\n 'has-text-centered has-text-success icon-x-large',\n successIconClassName,\n )}\n >\n check_circle_outline\n </MaterialIcon>\n ) : (\n <>\n <MaterialIcon\n className={clsx(\n 'has-text-centered has-text-danger icon-x-large',\n warningIconClassName,\n )}\n >\n warning\n </MaterialIcon>\n\n <p\n className={clsx('has-text-centered', warningMessageClassName)}\n >\n {warningMessage}\n </p>\n </>\n )}\n </div>\n </div>\n </div>\n {children}\n </div>\n )\n}\n\nexport default React.memo(ReceiptList)\n"]}
1
+ {"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,WAAW,CAAC,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,QAAQ,GACF;IACN,OAAO,CACL,6BAAK,SAAS,EAAC,qDAAqD;QAClE,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,2BAAG,SAAS,EAAC,mBAAmB;oBAC9B,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,+BAA+B,EAC/B,oBAAoB,CACrB,2BAGY,CACb,CACL,CAAC,CAAC,CAAC,CACF;oBACE,2BAAG,SAAS,EAAC,mBAAmB;wBAC9B,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,8BAA8B,EAC9B,oBAAoB,CACrB,cAGY,CACb;oBACJ,2BACE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,IAE5D,cAAc,CACb,CACH,CACJ,CACG,CACF,CACF;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n successIconClassName: string\n warningIconClassName?: string\n warningMessageClassName?: string\n warningMessage?: string\n children: React.ReactNode\n}\n\nfunction ReceiptList({\n successIconClassName,\n warningIconClassName,\n warningMessageClassName,\n warningMessage,\n children,\n}: Props) {\n return (\n <div className=\"ob-list has-dividers has-shadow has-margin-bottom-4\">\n <div className=\"ob-list__item\">\n <div className=\"ob-list__content-wrapper\">\n <div className=\"ob-list__content\">\n {!warningMessage ? (\n <p className=\"has-text-centered\">\n <MaterialIcon\n className={clsx(\n 'has-text-success icon-x-large',\n successIconClassName,\n )}\n >\n check_circle_outline\n </MaterialIcon>\n </p>\n ) : (\n <>\n <p className=\"has-text-centered\">\n <MaterialIcon\n className={clsx(\n 'has-text-danger icon-x-large',\n warningIconClassName,\n )}\n >\n warning\n </MaterialIcon>\n </p>\n <p\n className={clsx('has-text-centered', warningMessageClassName)}\n >\n {warningMessage}\n </p>\n </>\n )}\n </div>\n </div>\n </div>\n {children}\n </div>\n )\n}\n\nexport default React.memo(ReceiptList)\n"]}
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import clsx from 'clsx';
3
3
  import useLookupNotification from '../../hooks/useLookupNotification';
4
- import { generateLookupValidationMessage } from '../../services/form-validation';
4
+ import { generateLookupValidationMessage } from '../../services/form-validation/validators';
5
5
  import useFormIsReadOnly from '../../hooks/useFormIsReadOnly';
6
6
  import MaterialIcon from '../MaterialIcon';
7
7
  function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, lookupButtonConfig, }) {
@@ -1 +1 @@
1
- {"version":3,"file":"LookupButton.js","sourceRoot":"","sources":["../../../src/components/renderer/LookupButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,+BAA+B,EAAE,MAAM,gCAAgC,CAAA;AAChF,OAAO,iBAAiB,MAAM,+BAA+B,CAAA;AAE7D,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,kBAAkB,GACZ;;IACN,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAC1E,qBAAqB,CAAC,KAAK,CAAC,CAAA;IAC9B,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAA;IAE1D,MAAM,MAAM,GAAG,CACb,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,2DAA2D,EAC3D;YACE,YAAY,EAAE,SAAS;YACvB,gBAAgB,EAAE,aAAa;YAC/B,WAAW,EAAE,CAAC,aAAa;YAC3B,kBAAkB,EAAE,YAAY;SACjC,CACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,EACzB,QAAQ,EACN,cAAc;YACd,UAAU;YACV,SAAS;YACT,CAAC,YAAY,IAAI,CAAC,uBAAuB,CAAC;YAC1C,CAAC,CAAC,YAAY;gBACZ,CAAC,CAAC,iBAAiB;gBACnB,iBAAiB;oBACf,+BAA+B,CAAC,kBAAkB,CAAC,CAAC;QAGzD,aAAa,IAAI,iCAAa;QAC/B,8BAAM,SAAS,EAAC,MAAM;YACpB,oBAAC,YAAY,QAAE,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,mCAAI,QAAQ,CAAgB,CAC9D;QACP,8BAAM,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;sBACtD,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK,mCAAI,QAAQ,CACvC,CACA,CACV,CAAA;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,6BAAK,SAAS,EAAC,SAAS,IAAE,MAAM,CAAO,CAAA;IAChD,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useLookupNotification from '../../hooks/useLookupNotification'\nimport { generateLookupValidationMessage } from '../../services/form-validation'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { FormsAppsTypes } from '@oneblink/types'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n value: unknown | undefined\n validationMessage: string | undefined\n hasMarginTop?: boolean\n isInputButton?: boolean\n lookupButtonConfig?: FormsAppsTypes.ButtonConfiguration\n}\n\nfunction LookupButton({\n value,\n validationMessage,\n hasMarginTop,\n isInputButton,\n lookupButtonConfig,\n}: Props) {\n const { isLookup, onLookup, isDisabled, isLoading, allowLookupOnEmptyValue } =\n useLookupNotification(value)\n const formIsReadOnly = useFormIsReadOnly()\n if (!isLookup) {\n return null\n }\n\n const isEmptyValue = value === undefined || value === null\n\n const button = (\n <button\n type=\"button\"\n className={clsx(\n 'button is-primary ob-lookup__button cypress-lookup-button',\n {\n 'is-loading': isLoading,\n 'is-input-addon': isInputButton,\n 'ob-button': !isInputButton,\n 'has-margin-top-8': hasMarginTop,\n },\n )}\n onClick={() => onLookup()}\n disabled={\n formIsReadOnly ||\n isDisabled ||\n isLoading ||\n (isEmptyValue && !allowLookupOnEmptyValue) ||\n (!isEmptyValue &&\n !!validationMessage &&\n validationMessage !==\n generateLookupValidationMessage(lookupButtonConfig))\n }\n >\n {isInputButton && <span></span>}\n <span className=\"icon\">\n <MaterialIcon>{lookupButtonConfig?.icon ?? 'search'}</MaterialIcon>\n </span>\n <span className={isInputButton ? 'is-hidden-mobile' : undefined}>\n &nbsp;{lookupButtonConfig?.label ?? 'Lookup'}\n </span>\n </button>\n )\n\n if (isInputButton) {\n return <div className=\"control\">{button}</div>\n }\n\n return button\n}\n\nexport default React.memo(LookupButton)\n"]}
1
+ {"version":3,"file":"LookupButton.js","sourceRoot":"","sources":["../../../src/components/renderer/LookupButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAA;AAC3F,OAAO,iBAAiB,MAAM,+BAA+B,CAAA;AAE7D,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,kBAAkB,GACZ;;IACN,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAC1E,qBAAqB,CAAC,KAAK,CAAC,CAAA;IAC9B,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAA;IAE1D,MAAM,MAAM,GAAG,CACb,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,2DAA2D,EAC3D;YACE,YAAY,EAAE,SAAS;YACvB,gBAAgB,EAAE,aAAa;YAC/B,WAAW,EAAE,CAAC,aAAa;YAC3B,kBAAkB,EAAE,YAAY;SACjC,CACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,EACzB,QAAQ,EACN,cAAc;YACd,UAAU;YACV,SAAS;YACT,CAAC,YAAY,IAAI,CAAC,uBAAuB,CAAC;YAC1C,CAAC,CAAC,YAAY;gBACZ,CAAC,CAAC,iBAAiB;gBACnB,iBAAiB;oBACf,+BAA+B,CAAC,kBAAkB,CAAC,CAAC;QAGzD,aAAa,IAAI,iCAAa;QAC/B,8BAAM,SAAS,EAAC,MAAM;YACpB,oBAAC,YAAY,QAAE,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,mCAAI,QAAQ,CAAgB,CAC9D;QACP,8BAAM,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;sBACtD,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK,mCAAI,QAAQ,CACvC,CACA,CACV,CAAA;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,6BAAK,SAAS,EAAC,SAAS,IAAE,MAAM,CAAO,CAAA;IAChD,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useLookupNotification from '../../hooks/useLookupNotification'\nimport { generateLookupValidationMessage } from '../../services/form-validation/validators'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { FormsAppsTypes } from '@oneblink/types'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n value: unknown | undefined\n validationMessage: string | undefined\n hasMarginTop?: boolean\n isInputButton?: boolean\n lookupButtonConfig?: FormsAppsTypes.ButtonConfiguration\n}\n\nfunction LookupButton({\n value,\n validationMessage,\n hasMarginTop,\n isInputButton,\n lookupButtonConfig,\n}: Props) {\n const { isLookup, onLookup, isDisabled, isLoading, allowLookupOnEmptyValue } =\n useLookupNotification(value)\n const formIsReadOnly = useFormIsReadOnly()\n if (!isLookup) {\n return null\n }\n\n const isEmptyValue = value === undefined || value === null\n\n const button = (\n <button\n type=\"button\"\n className={clsx(\n 'button is-primary ob-lookup__button cypress-lookup-button',\n {\n 'is-loading': isLoading,\n 'is-input-addon': isInputButton,\n 'ob-button': !isInputButton,\n 'has-margin-top-8': hasMarginTop,\n },\n )}\n onClick={() => onLookup()}\n disabled={\n formIsReadOnly ||\n isDisabled ||\n isLoading ||\n (isEmptyValue && !allowLookupOnEmptyValue) ||\n (!isEmptyValue &&\n !!validationMessage &&\n validationMessage !==\n generateLookupValidationMessage(lookupButtonConfig))\n }\n >\n {isInputButton && <span></span>}\n <span className=\"icon\">\n <MaterialIcon>{lookupButtonConfig?.icon ?? 'search'}</MaterialIcon>\n </span>\n <span className={isInputButton ? 'is-hidden-mobile' : undefined}>\n &nbsp;{lookupButtonConfig?.label ?? 'Lookup'}\n </span>\n </button>\n )\n\n if (isInputButton) {\n return <div className=\"control\">{button}</div>\n }\n\n return button\n}\n\nexport default React.memo(LookupButton)\n"]}
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import FileCardContent from './FileCardContent';
3
3
  import AttachmentStatus from './AttachmentStatus';
4
- import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../../../services/form-validation';
4
+ import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../../../services/form-validation/validators';
5
5
  import ProgressBar from './ProgressBar';
6
6
  import DropdownMenu from './DropdownMenu';
7
7
  function FileCard({ element, isUploading, isUploadPaused, uploadErrorMessage, loadAttachmentUrlError, isLoadingAttachmentUrl, isContentTypeImage, attachmentUrl, fileName, onDownload, onRemove, onRetry, progress, index, }) {
@@ -1 +1 @@
1
- {"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/FileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,mCAAmC,CAAA;AAC1C,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAmBzC,SAAS,QAAQ,CAAC,EAChB,OAAO,EACP,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,aAAa,EACb,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,GACC;IACN,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAA;QACxE,CAAC;QACD,IAAI,CAAC,6BAA6B,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC;YACtD,OAAO,IAAI,KAAK,CAAC,GAAG,QAAQ,yBAAyB,CAAC,CAAA;QACxD,CAAC;QACD,IAAI,kBAAkB,EAAE,CAAC;YACvB,OAAO,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAA;QACtC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAE3C,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B;QACvC,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,2BACE,IAAI,EAAE,aAAa,IAAI,EAAE,EACzB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAE,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE;oBAEzD,oBAAC,eAAe,IACd,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,gBAAgB,KAAK,GAAG,CAAC,EAAE,EAChD,kBAAkB,EAAE,kBAAkB,GACtC,CACA,CACA;YACN,oBAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,IAAI,EAAE,GAClC;YAEF,6BAAK,SAAS,EAAC,+BAA+B;gBAC5C,8BAAM,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAQ;gBAC7D,oBAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,sBAAsB,EAAE,sBAAsB,EAC9C,sBAAsB,EAAE,sBAAsB,EAC9C,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GAClB;gBACF,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,GAAI,CACzD,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FileCardContent from './FileCardContent'\nimport AttachmentStatus from './AttachmentStatus'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../../../services/form-validation'\nimport ProgressBar from './ProgressBar'\nimport DropdownMenu from './DropdownMenu'\n\ntype Props = {\n element: FormTypes.FilesElement\n isUploading?: boolean\n isUploadPaused?: boolean\n uploadErrorMessage?: string\n loadAttachmentUrlError?: Error\n isLoadingAttachmentUrl?: boolean\n isContentTypeImage?: boolean\n fileName: string\n attachmentUrl: string | undefined | null\n onRemove: () => void\n onDownload?: () => void\n onRetry?: () => void\n progress: undefined | number\n index: number\n}\n\nfunction FileCard({\n element,\n isUploading,\n isUploadPaused,\n uploadErrorMessage,\n loadAttachmentUrlError,\n isLoadingAttachmentUrl,\n isContentTypeImage,\n attachmentUrl,\n fileName,\n onDownload,\n onRemove,\n onRetry,\n progress,\n index,\n}: Props) {\n const uploadError = React.useMemo(() => {\n if (!checkFileNameIsValid(element, fileName)) {\n return new Error(`${fileName.split('.').pop()} files are not allowed`)\n }\n if (!checkFileNameExtensionIsValid(element, fileName)) {\n return new Error(`${fileName} must have an extension`)\n }\n if (uploadErrorMessage) {\n return new Error(uploadErrorMessage)\n }\n }, [element, fileName, uploadErrorMessage])\n\n return (\n <div className=\"column is-one-quarter-ob\">\n <div className=\"ob-files__box\">\n <div className=\"ob-files__content\">\n <a\n href={attachmentUrl || ''}\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"dropdown-item cypress-file-download-button\"\n style={{ pointerEvents: attachmentUrl ? 'auto' : 'none' }}\n >\n <FileCardContent\n attachmentUrl={attachmentUrl}\n alt={`${element.label}: Attachment ${index + 1}`}\n isContentTypeImage={isContentTypeImage}\n />\n </a>\n </div>\n <DropdownMenu\n element={element}\n onDownload={onDownload}\n onRetry={onRetry}\n onRemove={onRemove}\n attachmentUrl={attachmentUrl || ''}\n />\n\n <div className=\"ob-files__file-name is-size-6\">\n <span className=\"ob-files__file-name-inner\">{fileName}</span>\n <AttachmentStatus\n isUploading={isUploading}\n isUploadPaused={isUploadPaused}\n uploadError={uploadError}\n loadAttachmentUrlError={loadAttachmentUrlError}\n isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n attachmentUrl={attachmentUrl}\n progress={progress}\n />\n <ProgressBar progress={progress} isShowing={!!isUploading} />\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(FileCard)\n"]}
1
+ {"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/FileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,8CAA8C,CAAA;AACrD,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAmBzC,SAAS,QAAQ,CAAC,EAChB,OAAO,EACP,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,aAAa,EACb,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,GACC;IACN,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAA;QACxE,CAAC;QACD,IAAI,CAAC,6BAA6B,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC;YACtD,OAAO,IAAI,KAAK,CAAC,GAAG,QAAQ,yBAAyB,CAAC,CAAA;QACxD,CAAC;QACD,IAAI,kBAAkB,EAAE,CAAC;YACvB,OAAO,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAA;QACtC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAE3C,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B;QACvC,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,2BACE,IAAI,EAAE,aAAa,IAAI,EAAE,EACzB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAE,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE;oBAEzD,oBAAC,eAAe,IACd,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,gBAAgB,KAAK,GAAG,CAAC,EAAE,EAChD,kBAAkB,EAAE,kBAAkB,GACtC,CACA,CACA;YACN,oBAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,IAAI,EAAE,GAClC;YAEF,6BAAK,SAAS,EAAC,+BAA+B;gBAC5C,8BAAM,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAQ;gBAC7D,oBAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,sBAAsB,EAAE,sBAAsB,EAC9C,sBAAsB,EAAE,sBAAsB,EAC9C,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GAClB;gBACF,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,GAAI,CACzD,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FileCardContent from './FileCardContent'\nimport AttachmentStatus from './AttachmentStatus'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../../../services/form-validation/validators'\nimport ProgressBar from './ProgressBar'\nimport DropdownMenu from './DropdownMenu'\n\ntype Props = {\n element: FormTypes.FilesElement\n isUploading?: boolean\n isUploadPaused?: boolean\n uploadErrorMessage?: string\n loadAttachmentUrlError?: Error\n isLoadingAttachmentUrl?: boolean\n isContentTypeImage?: boolean\n fileName: string\n attachmentUrl: string | undefined | null\n onRemove: () => void\n onDownload?: () => void\n onRetry?: () => void\n progress: undefined | number\n index: number\n}\n\nfunction FileCard({\n element,\n isUploading,\n isUploadPaused,\n uploadErrorMessage,\n loadAttachmentUrlError,\n isLoadingAttachmentUrl,\n isContentTypeImage,\n attachmentUrl,\n fileName,\n onDownload,\n onRemove,\n onRetry,\n progress,\n index,\n}: Props) {\n const uploadError = React.useMemo(() => {\n if (!checkFileNameIsValid(element, fileName)) {\n return new Error(`${fileName.split('.').pop()} files are not allowed`)\n }\n if (!checkFileNameExtensionIsValid(element, fileName)) {\n return new Error(`${fileName} must have an extension`)\n }\n if (uploadErrorMessage) {\n return new Error(uploadErrorMessage)\n }\n }, [element, fileName, uploadErrorMessage])\n\n return (\n <div className=\"column is-one-quarter-ob\">\n <div className=\"ob-files__box\">\n <div className=\"ob-files__content\">\n <a\n href={attachmentUrl || ''}\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"dropdown-item cypress-file-download-button\"\n style={{ pointerEvents: attachmentUrl ? 'auto' : 'none' }}\n >\n <FileCardContent\n attachmentUrl={attachmentUrl}\n alt={`${element.label}: Attachment ${index + 1}`}\n isContentTypeImage={isContentTypeImage}\n />\n </a>\n </div>\n <DropdownMenu\n element={element}\n onDownload={onDownload}\n onRetry={onRetry}\n onRemove={onRemove}\n attachmentUrl={attachmentUrl || ''}\n />\n\n <div className=\"ob-files__file-name is-size-6\">\n <span className=\"ob-files__file-name-inner\">{fileName}</span>\n <AttachmentStatus\n isUploading={isUploading}\n isUploadPaused={isUploadPaused}\n uploadError={uploadError}\n loadAttachmentUrlError={loadAttachmentUrlError}\n isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n attachmentUrl={attachmentUrl}\n progress={progress}\n />\n <ProgressBar progress={progress} isShowing={!!isUploading} />\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(FileCard)\n"]}
@@ -8,6 +8,6 @@ type Props = {
8
8
  validationMessage: string | undefined;
9
9
  value: string | undefined;
10
10
  };
11
- declare function FormElementCaptcha({ element, onChange: onCaptchChange, validationMessage, displayValidationMessage, }: Props): React.JSX.Element;
11
+ declare function FormElementCaptcha({ element, onChange: onCaptchaChange, validationMessage, displayValidationMessage, }: Props): React.JSX.Element;
12
12
  declare const _default: React.MemoExoticComponent<typeof FormElementCaptcha>;
13
13
  export default _default;
@@ -1,9 +1,12 @@
1
1
  import * as React from 'react';
2
2
  import ReCAPTCHA from 'react-google-recaptcha';
3
3
  import useCaptcha from '../hooks/useCaptcha';
4
+ import useIsOffline from '../hooks/useIsOffline';
4
5
  import useReCAPTCHAProps from '../hooks/useReCAPTCHAProps';
5
- function FormElementCaptcha({ element, onChange: onCaptchChange, validationMessage, displayValidationMessage, }) {
6
+ import { RECAPTCHA_OFFLINE_MESSAGE } from '../services/form-validation/validateSubmission';
7
+ function FormElementCaptcha({ element, onChange: onCaptchaChange, validationMessage, displayValidationMessage, }) {
6
8
  const { captchaSiteKey, captchaType, addCaptchaRef } = useCaptcha();
9
+ const isOffline = useIsOffline();
7
10
  const captchaRef = React.useRef(null);
8
11
  React.useEffect(() => {
9
12
  if (captchaRef.current) {
@@ -12,10 +15,10 @@ function FormElementCaptcha({ element, onChange: onCaptchChange, validationMessa
12
15
  }
13
16
  }, [captchaRef, addCaptchaRef]);
14
17
  const handleChange = React.useCallback((val) => {
15
- onCaptchChange(element, {
18
+ onCaptchaChange(element, {
16
19
  value: val || undefined,
17
20
  });
18
- }, [element, onCaptchChange]);
21
+ }, [element, onCaptchaChange]);
19
22
  const recaptchaProps = useReCAPTCHAProps({
20
23
  captchaSiteKey,
21
24
  captchaRef,
@@ -23,10 +26,11 @@ function FormElementCaptcha({ element, onChange: onCaptchChange, validationMessa
23
26
  onCaptchaChange: handleChange,
24
27
  });
25
28
  return (React.createElement("div", { className: "cypress-captcha-element" },
26
- React.createElement("div", { className: "ob-form__element ob-captcha" },
29
+ React.createElement("div", { className: "ob-form__element ob-captcha" }, isOffline ? (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
30
+ React.createElement("span", { className: "has-text-danger" }, RECAPTCHA_OFFLINE_MESSAGE))) : (React.createElement(React.Fragment, null,
27
31
  React.createElement(ReCAPTCHA, { ...recaptchaProps, className: "ob-input cypress-captcha-control" }),
28
32
  displayValidationMessage && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
29
- React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, validationMessage))))));
33
+ React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, validationMessage))))))));
30
34
  }
31
35
  export default React.memo(FormElementCaptcha);
32
36
  //# sourceMappingURL=FormElementCaptcha.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FormElementCaptcha.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCaptcha.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAG9C,OAAO,UAAU,MAAM,qBAAqB,CAAA;AAC5C,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAW1D,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,QAAQ,EAAE,cAAc,EACxB,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE,CAAA;IAEnE,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAY,IAAI,CAAC,CAAA;IAEhD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,qGAAqG;YACrG,OAAO,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAC1C,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAA;IAE/B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,GAAkB,EAAE,EAAE;QACrB,cAAc,CAAC,OAAO,EAAE;YACtB,KAAK,EAAE,GAAG,IAAI,SAAS;SACxB,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,cAAc,CAAC,CAC1B,CAAA;IAED,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,cAAc;QACd,UAAU;QACV,WAAW;QACX,eAAe,EAAE,YAAY;KAC9B,CAAC,CAAA;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,oBAAC,SAAS,OACJ,cAAc,EAClB,SAAS,EAAC,kCAAkC,GAC5C;YACD,wBAAwB,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAClD,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,4EAA4E,IACxF,iBAAiB,CACd,CACF,CACP,CACG,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ReCAPTCHA from 'react-google-recaptcha'\nimport { FormTypes } from '@oneblink/types'\n\nimport useCaptcha from '../hooks/useCaptcha'\nimport useReCAPTCHAProps from '../hooks/useReCAPTCHAProps'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n element: FormTypes.CaptchaElement\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n value: string | undefined\n}\n\nfunction FormElementCaptcha({\n element,\n onChange: onCaptchChange,\n validationMessage,\n displayValidationMessage,\n}: Props) {\n const { captchaSiteKey, captchaType, addCaptchaRef } = useCaptcha()\n\n const captchaRef = React.useRef<ReCAPTCHA>(null)\n\n React.useEffect(() => {\n if (captchaRef.current) {\n // addCaptchaRef returns a function to remove the captcha which will fire when the component unmounts\n return addCaptchaRef(captchaRef.current)\n }\n }, [captchaRef, addCaptchaRef])\n\n const handleChange = React.useCallback(\n (val: string | null) => {\n onCaptchChange(element, {\n value: val || undefined,\n })\n },\n [element, onCaptchChange],\n )\n\n const recaptchaProps = useReCAPTCHAProps({\n captchaSiteKey,\n captchaRef,\n captchaType,\n onCaptchaChange: handleChange,\n })\n\n return (\n <div className=\"cypress-captcha-element\">\n <div className=\"ob-form__element ob-captcha\">\n <ReCAPTCHA\n {...recaptchaProps}\n className=\"ob-input cypress-captcha-control\"\n />\n {displayValidationMessage && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-required cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport default React.memo(FormElementCaptcha)\n"]}
1
+ {"version":3,"file":"FormElementCaptcha.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCaptcha.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAG9C,OAAO,UAAU,MAAM,qBAAqB,CAAA;AAC5C,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAChD,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,gDAAgD,CAAA;AAW1F,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,QAAQ,EAAE,eAAe,EACzB,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE,CAAA;IACnE,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAY,IAAI,CAAC,CAAA;IAEhD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,qGAAqG;YACrG,OAAO,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAC1C,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAA;IAE/B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,GAAkB,EAAE,EAAE;QACrB,eAAe,CAAC,OAAO,EAAE;YACvB,KAAK,EAAE,GAAG,IAAI,SAAS;SACxB,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,eAAe,CAAC,CAC3B,CAAA;IAED,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,cAAc;QACd,UAAU;QACV,WAAW;QACX,eAAe,EAAE,YAAY;KAC9B,CAAC,CAAA;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,6BAAK,SAAS,EAAC,6BAA6B,IACzC,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;YAC5C,8BAAM,SAAS,EAAC,iBAAiB,IAAE,yBAAyB,CAAQ,CAChE,CACP,CAAC,CAAC,CAAC,CACF;YACE,oBAAC,SAAS,OACJ,cAAc,EAClB,SAAS,EAAC,kCAAkC,GAC5C;YACD,wBAAwB,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAClD,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,4EAA4E,IACxF,iBAAiB,CACd,CACF,CACP,CACA,CACJ,CACG,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ReCAPTCHA from 'react-google-recaptcha'\nimport { FormTypes } from '@oneblink/types'\n\nimport useCaptcha from '../hooks/useCaptcha'\nimport useIsOffline from '../hooks/useIsOffline'\nimport useReCAPTCHAProps from '../hooks/useReCAPTCHAProps'\nimport { RECAPTCHA_OFFLINE_MESSAGE } from '../services/form-validation/validateSubmission'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n element: FormTypes.CaptchaElement\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n value: string | undefined\n}\n\nfunction FormElementCaptcha({\n element,\n onChange: onCaptchaChange,\n validationMessage,\n displayValidationMessage,\n}: Props) {\n const { captchaSiteKey, captchaType, addCaptchaRef } = useCaptcha()\n const isOffline = useIsOffline()\n\n const captchaRef = React.useRef<ReCAPTCHA>(null)\n\n React.useEffect(() => {\n if (captchaRef.current) {\n // addCaptchaRef returns a function to remove the captcha which will fire when the component unmounts\n return addCaptchaRef(captchaRef.current)\n }\n }, [captchaRef, addCaptchaRef])\n\n const handleChange = React.useCallback(\n (val: string | null) => {\n onCaptchaChange(element, {\n value: val || undefined,\n })\n },\n [element, onCaptchaChange],\n )\n\n const recaptchaProps = useReCAPTCHAProps({\n captchaSiteKey,\n captchaRef,\n captchaType,\n onCaptchaChange: handleChange,\n })\n\n return (\n <div className=\"cypress-captcha-element\">\n <div className=\"ob-form__element ob-captcha\">\n {isOffline ? (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <span className=\"has-text-danger\">{RECAPTCHA_OFFLINE_MESSAGE}</span>\n </div>\n ) : (\n <>\n <ReCAPTCHA\n {...recaptchaProps}\n className=\"ob-input cypress-captcha-control\"\n />\n {displayValidationMessage && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-required cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </>\n )}\n </div>\n </div>\n )\n}\n\nexport default React.memo(FormElementCaptcha)\n"]}
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
3
3
  import FormElementFile from './FormElementFile';
4
4
  import useAttachments from '../hooks/attachments/useAttachments';
5
- import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../services/form-validation';
5
+ import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../services/form-validation/validators';
6
6
  import { LookupNotificationContext } from '../hooks/useLookupNotification';
7
7
  import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
8
8
  import MaterialIcon from '../components/MaterialIcon';
@@ -1 +1 @@
1
- {"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../services/form-validation'\nimport { attachmentsService } from '@oneblink/apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\n\nexport function stringifyAttachments(\n value: attachmentsService.Attachment[] | undefined,\n): string {\n if (value?.every((attachment) => !attachment.type)) {\n return JSON.stringify(value)\n }\n return ''\n}\n\nfunction FormElementFiles({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: {\n id: string\n element: FormTypes.FilesElement\n value?: attachmentsService.Attachment[]\n onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n element,\n onChange,\n setIsDirty,\n )\n\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n const handleAdd = React.useCallback(() => {\n if (!inputRef.current) return\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n inputRef.current.value = ''\n inputRef.current.click()\n }, [])\n\n const attachments = value || []\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-files-element\">\n <FormElementLabelContainer\n className=\"ob-files\"\n element={element}\n id={id}\n required={!!element.minEntries}\n >\n <input\n ref={inputRef}\n type=\"file\"\n name={element.name}\n id={id}\n className=\"file-input ob-input\"\n multiple={element.maxEntries !== 1}\n disabled={element.readOnly}\n onChange={(event) =>\n addAttachments(\n event.target.files ? Array.from(event.target.files) : [],\n )\n }\n />\n <div className=\"control cypress-files-control\">\n <div className=\"columns is-multiline ob-columns-container\">\n {attachments.map((attachment, index) => {\n return (\n <FormElementFile\n key={attachment.type ? attachment._id : attachment.id}\n element={element}\n onRemove={removeAttachment}\n file={attachment}\n onChange={changeAttachment}\n disableUpload={\n (!!element.maxEntries &&\n attachments.length > element.maxEntries) ||\n !checkFileNameIsValid(element, attachment.fileName) ||\n !checkFileNameExtensionIsValid(element, attachment.fileName)\n }\n index={index}\n />\n )\n })}\n {!element.readOnly &&\n (!element.maxEntries ||\n attachments.length < element.maxEntries) && (\n <div className=\"column is-one-quarter-ob\">\n <button\n type=\"button\"\n className=\"button ob-files__add-new-button\"\n onClick={handleAdd}\n aria-describedby={ariaDescribedby}\n onBlur={setIsDirty}\n >\n <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n </button>\n </div>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
1
+ {"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../services/form-validation/validators'\nimport { attachmentsService } from '@oneblink/apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\n\nexport function stringifyAttachments(\n value: attachmentsService.Attachment[] | undefined,\n): string {\n if (value?.every((attachment) => !attachment.type)) {\n return JSON.stringify(value)\n }\n return ''\n}\n\nfunction FormElementFiles({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: {\n id: string\n element: FormTypes.FilesElement\n value?: attachmentsService.Attachment[]\n onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n element,\n onChange,\n setIsDirty,\n )\n\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n const handleAdd = React.useCallback(() => {\n if (!inputRef.current) return\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n inputRef.current.value = ''\n inputRef.current.click()\n }, [])\n\n const attachments = value || []\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-files-element\">\n <FormElementLabelContainer\n className=\"ob-files\"\n element={element}\n id={id}\n required={!!element.minEntries}\n >\n <input\n ref={inputRef}\n type=\"file\"\n name={element.name}\n id={id}\n className=\"file-input ob-input\"\n multiple={element.maxEntries !== 1}\n disabled={element.readOnly}\n onChange={(event) =>\n addAttachments(\n event.target.files ? Array.from(event.target.files) : [],\n )\n }\n />\n <div className=\"control cypress-files-control\">\n <div className=\"columns is-multiline ob-columns-container\">\n {attachments.map((attachment, index) => {\n return (\n <FormElementFile\n key={attachment.type ? attachment._id : attachment.id}\n element={element}\n onRemove={removeAttachment}\n file={attachment}\n onChange={changeAttachment}\n disableUpload={\n (!!element.maxEntries &&\n attachments.length > element.maxEntries) ||\n !checkFileNameIsValid(element, attachment.fileName) ||\n !checkFileNameExtensionIsValid(element, attachment.fileName)\n }\n index={index}\n />\n )\n })}\n {!element.readOnly &&\n (!element.maxEntries ||\n attachments.length < element.maxEntries) && (\n <div className=\"column is-one-quarter-ob\">\n <button\n type=\"button\"\n className=\"button ob-files__add-new-button\"\n onClick={handleAdd}\n aria-describedby={ariaDescribedby}\n onBlur={setIsDirty}\n >\n <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n </button>\n </div>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
@@ -4,7 +4,7 @@ import { Collapse } from '@mui/material';
4
4
  import Tooltip from '../components/renderer/Tooltip';
5
5
  import useBooleanState from '../hooks/useBooleanState';
6
6
  import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
7
- import { checkSectionValidity } from '../services/form-validation';
7
+ import { checkSectionValidity } from '../services/form-validation/validators';
8
8
  import { HintBelowLabel, HintTooltip, } from '../components/renderer/FormElementLabelContainer';
9
9
  import useValidationClass from '../hooks/useValidationClass';
10
10
  import MaterialIcon from '../components/MaterialIcon';
@@ -1 +1 @@
1
- {"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse } from '@mui/material'\nimport Tooltip from '../components/renderer/Tooltip'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation'\nimport {\n FormElementLookupHandler,\n UpdateFormElementsHandler,\n ExecutedLookups,\n} from '../types/form'\nimport {\n HintBelowLabel,\n HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport MaterialIcon from '../components/MaterialIcon'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n element,\n onLookup,\n displayValidationMessages,\n onUpdateFormElements,\n sectionHeaderId,\n ...props\n}: Omit<Props<T>, 'elements'> & {\n element: FormTypes.SectionElement\n sectionHeaderId: string\n}) {\n const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n const headerRef = React.useRef<HTMLDivElement>(null)\n const id = `${props['idPrefix']}${element.id}`\n\n React.useEffect(() => {\n if (isCollapsed && !isDisplayingError) {\n setIsDisplayingError(true)\n }\n }, [isCollapsed, isDisplayingError])\n\n const displayValidationMessage =\n displayValidationMessages || isDisplayingError\n\n const isValid = React.useMemo(\n () => !checkSectionValidity(element, props.formElementsValidation),\n [element, props.formElementsValidation],\n )\n\n const { validationClassName, valid } = useValidationClass({\n formElementsValid: isValid,\n displayInvalidClassName: displayValidationMessage,\n validClassName: 'ob-section__valid',\n invalidClassName: 'ob-section__invalid',\n })\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission\n let newExecutedLookups: ExecutedLookups = {}\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (formElement.type === 'section' && formElement.id === element.id) {\n const { elements, submission, executedLookups } =\n mergeLookupResults({\n elements: formElement.elements,\n submission: currentFormSubmission.submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: currentFormSubmission.executedLookups,\n })\n model = submission\n newExecutedLookups = executedLookups\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n return {\n elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: newExecutedLookups,\n }\n })\n },\n [element.id, onLookup],\n )\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (\n formElement.id === element.id &&\n formElement.type === 'section'\n ) {\n return {\n ...formElement,\n elements: setter(formElement.elements),\n }\n }\n return formElement\n })\n })\n },\n [element.id, onUpdateFormElements],\n )\n\n const handleClickBottomCollapseButton = React.useCallback(() => {\n toggle()\n headerRef.current?.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n })\n }, [toggle])\n\n return (\n <div className={clsx('ob-section', validationClassName)}>\n <div\n className={clsx('ob-section__header cypress-section-header', {\n 'ob-section__header-filled': element.canCollapseFromBottom,\n })}\n onClick={toggle}\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n toggle()\n }\n }}\n ref={headerRef}\n >\n <h3 className=\"ob-section__header-text title is-3\" id={sectionHeaderId}>\n {element.label}\n {element.hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <HintTooltip hint={element.hint} inputId={id} />\n )}\n </h3>\n <div className=\"ob-section__header-icon-container\">\n {!valid && displayValidationMessage && (\n <Tooltip title=\"Section has errors\">\n <MaterialIcon className=\"has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n warning\n </MaterialIcon>\n </Tooltip>\n )}\n <MaterialIcon\n className={clsx('ob-section__header-icon', {\n 'is-rotated': !isCollapsed,\n })}\n >\n expand_more\n </MaterialIcon>\n </div>\n {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-section__hint-text-container\">\n <HintBelowLabel hint={element.hint} inputId={id} />\n </div>\n )}\n </div>\n {!element.canCollapseFromBottom && <hr className=\"ob-section__divider\" />}\n <Collapse\n in={!isCollapsed}\n classes={{\n root: 'ob-section__content',\n entered: 'ob-section__expanded',\n hidden: 'ob-section__collapsed',\n }}\n >\n <SectionElementsWrapper\n element={element}\n onCollapse={handleClickBottomCollapseButton}\n >\n <OneBlinkFormElements\n {...props}\n displayValidationMessages={displayValidationMessage}\n onLookup={handleLookup}\n elements={element.elements}\n onUpdateFormElements={handleUpdateNestedFormElements}\n />\n </SectionElementsWrapper>\n </Collapse>\n </div>\n )\n}\n\nexport default React.memo(FormElementSection)\n\nconst SectionElementsWrapper = ({\n children,\n element,\n onCollapse,\n}: {\n children: React.ReactNode\n element: FormTypes.SectionElement\n onCollapse: () => void\n}) => {\n return element.canCollapseFromBottom ? (\n <div className=\"ob-section__collapsible-content-container\">\n {children}\n\n <button\n type=\"button\"\n className=\"button is-rounded is-light ob-section__bottom-collapse-button\"\n onClick={onCollapse}\n >\n <span className=\"icon\">\n <MaterialIcon>expand_less</MaterialIcon>\n </span>\n <span>Collapse</span>\n </button>\n </div>\n ) : (\n <>{children}</>\n )\n}\n"]}
1
+ {"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse } from '@mui/material'\nimport Tooltip from '../components/renderer/Tooltip'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation/validators'\nimport {\n FormElementLookupHandler,\n UpdateFormElementsHandler,\n ExecutedLookups,\n} from '../types/form'\nimport {\n HintBelowLabel,\n HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport MaterialIcon from '../components/MaterialIcon'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n element,\n onLookup,\n displayValidationMessages,\n onUpdateFormElements,\n sectionHeaderId,\n ...props\n}: Omit<Props<T>, 'elements'> & {\n element: FormTypes.SectionElement\n sectionHeaderId: string\n}) {\n const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n const headerRef = React.useRef<HTMLDivElement>(null)\n const id = `${props['idPrefix']}${element.id}`\n\n React.useEffect(() => {\n if (isCollapsed && !isDisplayingError) {\n setIsDisplayingError(true)\n }\n }, [isCollapsed, isDisplayingError])\n\n const displayValidationMessage =\n displayValidationMessages || isDisplayingError\n\n const isValid = React.useMemo(\n () => !checkSectionValidity(element, props.formElementsValidation),\n [element, props.formElementsValidation],\n )\n\n const { validationClassName, valid } = useValidationClass({\n formElementsValid: isValid,\n displayInvalidClassName: displayValidationMessage,\n validClassName: 'ob-section__valid',\n invalidClassName: 'ob-section__invalid',\n })\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission\n let newExecutedLookups: ExecutedLookups = {}\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (formElement.type === 'section' && formElement.id === element.id) {\n const { elements, submission, executedLookups } =\n mergeLookupResults({\n elements: formElement.elements,\n submission: currentFormSubmission.submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: currentFormSubmission.executedLookups,\n })\n model = submission\n newExecutedLookups = executedLookups\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n return {\n elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: newExecutedLookups,\n }\n })\n },\n [element.id, onLookup],\n )\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (\n formElement.id === element.id &&\n formElement.type === 'section'\n ) {\n return {\n ...formElement,\n elements: setter(formElement.elements),\n }\n }\n return formElement\n })\n })\n },\n [element.id, onUpdateFormElements],\n )\n\n const handleClickBottomCollapseButton = React.useCallback(() => {\n toggle()\n headerRef.current?.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n })\n }, [toggle])\n\n return (\n <div className={clsx('ob-section', validationClassName)}>\n <div\n className={clsx('ob-section__header cypress-section-header', {\n 'ob-section__header-filled': element.canCollapseFromBottom,\n })}\n onClick={toggle}\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n toggle()\n }\n }}\n ref={headerRef}\n >\n <h3 className=\"ob-section__header-text title is-3\" id={sectionHeaderId}>\n {element.label}\n {element.hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <HintTooltip hint={element.hint} inputId={id} />\n )}\n </h3>\n <div className=\"ob-section__header-icon-container\">\n {!valid && displayValidationMessage && (\n <Tooltip title=\"Section has errors\">\n <MaterialIcon className=\"has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n warning\n </MaterialIcon>\n </Tooltip>\n )}\n <MaterialIcon\n className={clsx('ob-section__header-icon', {\n 'is-rotated': !isCollapsed,\n })}\n >\n expand_more\n </MaterialIcon>\n </div>\n {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-section__hint-text-container\">\n <HintBelowLabel hint={element.hint} inputId={id} />\n </div>\n )}\n </div>\n {!element.canCollapseFromBottom && <hr className=\"ob-section__divider\" />}\n <Collapse\n in={!isCollapsed}\n classes={{\n root: 'ob-section__content',\n entered: 'ob-section__expanded',\n hidden: 'ob-section__collapsed',\n }}\n >\n <SectionElementsWrapper\n element={element}\n onCollapse={handleClickBottomCollapseButton}\n >\n <OneBlinkFormElements\n {...props}\n displayValidationMessages={displayValidationMessage}\n onLookup={handleLookup}\n elements={element.elements}\n onUpdateFormElements={handleUpdateNestedFormElements}\n />\n </SectionElementsWrapper>\n </Collapse>\n </div>\n )\n}\n\nexport default React.memo(FormElementSection)\n\nconst SectionElementsWrapper = ({\n children,\n element,\n onCollapse,\n}: {\n children: React.ReactNode\n element: FormTypes.SectionElement\n onCollapse: () => void\n}) => {\n return element.canCollapseFromBottom ? (\n <div className=\"ob-section__collapsible-content-container\">\n {children}\n\n <button\n type=\"button\"\n className=\"button is-rounded is-light ob-section__bottom-collapse-button\"\n onClick={onCollapse}\n >\n <span className=\"icon\">\n <MaterialIcon>expand_less</MaterialIcon>\n </span>\n <span>Collapse</span>\n </button>\n </div>\n ) : (\n <>{children}</>\n )\n}\n"]}
@@ -1,10 +1,18 @@
1
1
  import * as React from 'react';
2
2
  import useContrastColor from '../hooks/useContrastColor';
3
+ import { Box } from '@mui/material';
3
4
  const OptionButton = ({ element, option, isSelected, onClick, className, onBlur, ...props }) => {
4
5
  const buttonContrastColor = useContrastColor(option.colour);
5
6
  return (React.createElement("button", { type: "button", className: className, style: option.colour && isSelected
6
- ? { backgroundColor: option.colour, color: buttonContrastColor }
7
- : undefined, disabled: element.readOnly, onClick: onClick, "aria-describedby": props['aria-describedby'], onBlur: onBlur }, option.label));
7
+ ? {
8
+ backgroundColor: option.colour,
9
+ color: buttonContrastColor,
10
+ height: 'auto',
11
+ }
12
+ : { height: 'auto' }, disabled: element.readOnly, onClick: onClick, "aria-describedby": props['aria-describedby'], onBlur: onBlur },
13
+ React.createElement(Box, { display: "flex", flexDirection: "column", className: "ob-options__box" },
14
+ option.imageUrl && (React.createElement("img", { className: "ob-options__image", src: option.imageUrl, alt: option.label })),
15
+ option.label)));
8
16
  };
9
17
  export default React.memo(OptionButton);
10
18
  //# sourceMappingURL=OptionButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAcxD,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE;YAChE,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,sBACE,KAAK,CAAC,kBAAkB,CAAC,EAC3C,MAAM,EAAE,MAAM,IAEb,MAAM,CAAC,KAAK,CACN,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useContrastColor from '../hooks/useContrastColor'\nimport { FormTypes } from '@oneblink/types'\ntype Props = {\n element:\n | FormTypes.RadioButtonElement\n | FormTypes.CheckboxElement\n | FormTypes.ComplianceElement\n option: FormTypes.ChoiceElementOption\n isSelected: boolean\n onClick: () => void\n className: string\n onBlur?: () => void\n 'aria-describedby'?: string\n}\nconst OptionButton = ({\n element,\n option,\n isSelected,\n onClick,\n className,\n onBlur,\n ...props\n}: Props) => {\n const buttonContrastColor = useContrastColor(option.colour)\n return (\n <button\n type=\"button\"\n className={className}\n style={\n option.colour && isSelected\n ? { backgroundColor: option.colour, color: buttonContrastColor }\n : undefined\n }\n disabled={element.readOnly}\n onClick={onClick}\n aria-describedby={props['aria-describedby']}\n onBlur={onBlur}\n >\n {option.label}\n </button>\n )\n}\n\nexport default React.memo<Props>(OptionButton)\n"]}
1
+ {"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAcnC,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC;gBACE,eAAe,EAAE,MAAM,CAAC,MAAM;gBAC9B,KAAK,EAAE,mBAAmB;gBAC1B,MAAM,EAAE,MAAM;aACf;YACH,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAExB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,sBACE,KAAK,CAAC,kBAAkB,CAAC,EAC3C,MAAM,EAAE,MAAM;QAEd,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAC,iBAAiB;YACnE,MAAM,CAAC,QAAQ,IAAI,CAClB,6BACE,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,MAAM,CAAC,QAAQ,EACpB,GAAG,EAAE,MAAM,CAAC,KAAK,GACjB,CACH;YACA,MAAM,CAAC,KAAK,CACT,CACC,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useContrastColor from '../hooks/useContrastColor'\nimport { FormTypes } from '@oneblink/types'\nimport { Box } from '@mui/material'\n\ntype Props = {\n element:\n | FormTypes.RadioButtonElement\n | FormTypes.CheckboxElement\n | FormTypes.ComplianceElement\n option: FormTypes.ChoiceElementOption\n isSelected: boolean\n onClick: () => void\n className: string\n onBlur?: () => void\n 'aria-describedby'?: string\n}\nconst OptionButton = ({\n element,\n option,\n isSelected,\n onClick,\n className,\n onBlur,\n ...props\n}: Props) => {\n const buttonContrastColor = useContrastColor(option.colour)\n\n return (\n <button\n type=\"button\"\n className={className}\n style={\n option.colour && isSelected\n ? {\n backgroundColor: option.colour,\n color: buttonContrastColor,\n height: 'auto',\n }\n : { height: 'auto' }\n }\n disabled={element.readOnly}\n onClick={onClick}\n aria-describedby={props['aria-describedby']}\n onBlur={onBlur}\n >\n <Box display=\"flex\" flexDirection=\"column\" className=\"ob-options__box\">\n {option.imageUrl && (\n <img\n className=\"ob-options__image\"\n src={option.imageUrl}\n alt={option.label}\n />\n )}\n {option.label}\n </Box>\n </button>\n )\n}\n\nexport default React.memo<Props>(OptionButton)\n"]}
@@ -1,5 +1,5 @@
1
1
  import { FormTypes, SubmissionTypes } from '@oneblink/types';
2
2
  import { CaptchaType, ExecutedLookups, FormElementsConditionallyShown } from '../types/form';
3
3
  export default function useFormValidation(pages: FormTypes.PageElement[]): {
4
- validate: (submission: SubmissionTypes.S3SubmissionData["submission"], formElementsConditionallyShown: FormElementsConditionallyShown, executedLookups: ExecutedLookups, captchaType: CaptchaType) => import("../types/form").FormElementsValidation | undefined;
4
+ validate: (submission: SubmissionTypes.S3SubmissionData["submission"], formElementsConditionallyShown: FormElementsConditionallyShown, executedLookups: ExecutedLookups, captchaType: CaptchaType, isOffline: boolean) => import("../types/form").FormElementsValidation | undefined;
5
5
  };
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { validateSubmission, generateValidationSchema, } from '../services/form-validation';
2
+ import validateSubmission from '../services/form-validation/validateSubmission';
3
3
  function stripFormElementsWithoutName(formElements) {
4
4
  return formElements.reduce((memo, formElement) => {
5
5
  switch (formElement.type) {
@@ -31,12 +31,16 @@ export default function useFormValidation(pages) {
31
31
  const formElementsWithoutName = React.useMemo(() => {
32
32
  return stripFormElementsWithoutName(pages);
33
33
  }, [pages]);
34
- const validationSchema = React.useMemo(() => {
35
- return generateValidationSchema(formElementsWithoutName);
34
+ const handleValidate = React.useCallback((submission, formElementsConditionallyShown, executedLookups, captchaType, isOffline) => {
35
+ return validateSubmission({
36
+ elements: formElementsWithoutName,
37
+ submission,
38
+ formElementsConditionallyShown,
39
+ executedLookups,
40
+ captchaType,
41
+ isOffline,
42
+ });
36
43
  }, [formElementsWithoutName]);
37
- const handleValidate = React.useCallback((submission, formElementsConditionallyShown, executedLookups, captchaType) => {
38
- return validateSubmission(validationSchema, submission, formElementsConditionallyShown, executedLookups, captchaType);
39
- }, [validationSchema]);
40
44
  return {
41
45
  validate: handleValidate,
42
46
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,6BAA6B,CAAA;AAOpC,SAAS,4BAA4B,CACnC,YAAqC;IAErC,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;QACpB,QAAQ,WAAW,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO;oBACL,GAAG,IAAI;oBACP,GAAG,4BAA4B,CAAC,WAAW,CAAC,QAAQ,CAAC;iBACtD,CAAA;YACH,CAAC;YACD,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,CAAC;YACZ,KAAK,eAAe,CAAC,CAAC,CAAC;gBACrB,OAAO;oBACL,GAAG,IAAI;oBACP;wBACE,GAAG,WAAW;wBACd,QAAQ,EAAE,4BAA4B,CACpC,WAAW,CAAC,QAAQ,IAAI,EAAE,CAC3B;qBACF;iBACF,CAAA;YACH,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,CAAC,GAAG,IAAI,EAAE,WAAW,CAAC,CAAA;YAC/B,CAAC;QACH,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjD,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,wBAAwB,CAAC,uBAAuB,CAAC,CAAA;IAC1D,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAA;IAE7B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA0D,EAC1D,8BAA8D,EAC9D,eAAgC,EAChC,WAAwB,EACxB,EAAE;QACF,OAAO,kBAAkB,CACvB,gBAAgB,EAChB,UAAU,EACV,8BAA8B,EAC9B,eAAe,EACf,WAAW,CACZ,CAAA;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAA;IAED,OAAO;QACL,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport {\n validateSubmission,\n generateValidationSchema,\n} from '../services/form-validation'\nimport {\n CaptchaType,\n ExecutedLookups,\n FormElementsConditionallyShown,\n} from '../types/form'\n\nfunction stripFormElementsWithoutName(\n formElements: FormTypes.FormElement[],\n): FormTypes.FormElementWithName[] {\n return formElements.reduce<FormTypes.FormElementWithName[]>(\n (memo, formElement) => {\n switch (formElement.type) {\n case 'page':\n case 'section': {\n return [\n ...memo,\n ...stripFormElementsWithoutName(formElement.elements),\n ]\n }\n case 'infoPage':\n case 'form':\n case 'repeatableSet': {\n return [\n ...memo,\n {\n ...formElement,\n elements: stripFormElementsWithoutName(\n formElement.elements || [],\n ),\n },\n ]\n }\n default: {\n return [...memo, formElement]\n }\n }\n },\n [],\n )\n}\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n const formElementsWithoutName = React.useMemo(() => {\n return stripFormElementsWithoutName(pages)\n }, [pages])\n\n const validationSchema = React.useMemo(() => {\n return generateValidationSchema(formElementsWithoutName)\n }, [formElementsWithoutName])\n\n const handleValidate = React.useCallback(\n (\n submission: SubmissionTypes.S3SubmissionData['submission'],\n formElementsConditionallyShown: FormElementsConditionallyShown,\n executedLookups: ExecutedLookups,\n captchaType: CaptchaType,\n ) => {\n return validateSubmission(\n validationSchema,\n submission,\n formElementsConditionallyShown,\n executedLookups,\n captchaType,\n )\n },\n [validationSchema],\n )\n\n return {\n validate: handleValidate,\n }\n}\n"]}
1
+ {"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,kBAAkB,MAAM,gDAAgD,CAAA;AAO/E,SAAS,4BAA4B,CACnC,YAAqC;IAErC,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;QACpB,QAAQ,WAAW,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO;oBACL,GAAG,IAAI;oBACP,GAAG,4BAA4B,CAAC,WAAW,CAAC,QAAQ,CAAC;iBACtD,CAAA;YACH,CAAC;YACD,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,CAAC;YACZ,KAAK,eAAe,CAAC,CAAC,CAAC;gBACrB,OAAO;oBACL,GAAG,IAAI;oBACP;wBACE,GAAG,WAAW;wBACd,QAAQ,EAAE,4BAA4B,CACpC,WAAW,CAAC,QAAQ,IAAI,EAAE,CAC3B;qBACF;iBACF,CAAA;YACH,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,CAAC,GAAG,IAAI,EAAE,WAAW,CAAC,CAAA;YAC/B,CAAC;QACH,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjD,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA0D,EAC1D,8BAA8D,EAC9D,eAAgC,EAChC,WAAwB,EACxB,SAAkB,EAClB,EAAE;QACF,OAAO,kBAAkB,CAAC;YACxB,QAAQ,EAAE,uBAAuB;YACjC,UAAU;YACV,8BAA8B;YAC9B,eAAe;YACf,WAAW;YACX,SAAS;SACV,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,uBAAuB,CAAC,CAC1B,CAAA;IAED,OAAO;QACL,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport validateSubmission from '../services/form-validation/validateSubmission'\nimport {\n CaptchaType,\n ExecutedLookups,\n FormElementsConditionallyShown,\n} from '../types/form'\n\nfunction stripFormElementsWithoutName(\n formElements: FormTypes.FormElement[],\n): FormTypes.FormElementWithName[] {\n return formElements.reduce<FormTypes.FormElementWithName[]>(\n (memo, formElement) => {\n switch (formElement.type) {\n case 'page':\n case 'section': {\n return [\n ...memo,\n ...stripFormElementsWithoutName(formElement.elements),\n ]\n }\n case 'infoPage':\n case 'form':\n case 'repeatableSet': {\n return [\n ...memo,\n {\n ...formElement,\n elements: stripFormElementsWithoutName(\n formElement.elements || [],\n ),\n },\n ]\n }\n default: {\n return [...memo, formElement]\n }\n }\n },\n [],\n )\n}\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n const formElementsWithoutName = React.useMemo(() => {\n return stripFormElementsWithoutName(pages)\n }, [pages])\n\n const handleValidate = React.useCallback(\n (\n submission: SubmissionTypes.S3SubmissionData['submission'],\n formElementsConditionallyShown: FormElementsConditionallyShown,\n executedLookups: ExecutedLookups,\n captchaType: CaptchaType,\n isOffline: boolean,\n ) => {\n return validateSubmission({\n elements: formElementsWithoutName,\n submission,\n formElementsConditionallyShown,\n executedLookups,\n captchaType,\n isOffline,\n })\n },\n [formElementsWithoutName],\n )\n\n return {\n validate: handleValidate,\n }\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import useBooleanState from '../hooks/useBooleanState';
3
- import { checkSectionValidity } from '../services/form-validation';
3
+ import { checkSectionValidity } from '../services/form-validation/validators';
4
4
  import scrollingService from '../services/scrolling-service';
5
5
  export default function usePages({ pages, formElementsValidation, formElementsConditionallyShown, hasAttemptedSubmit, }) {
6
6
  const scrollToTopOfPageHTMLElementRef = React.useRef(null);
@@ -1 +1 @@
1
- {"version":3,"file":"usePages.js","sourceRoot":"","sources":["../../src/hooks/usePages.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport { checkSectionValidity } from '../services/form-validation'\nimport scrollingService from '../services/scrolling-service'\nimport {\n FormElementsConditionallyShown,\n FormElementsValidation,\n} from '../types/form'\n\nexport default function usePages({\n pages,\n formElementsValidation,\n formElementsConditionallyShown,\n hasAttemptedSubmit,\n}: {\n pages: FormTypes.PageElement[]\n formElementsValidation: FormElementsValidation | undefined\n formElementsConditionallyShown: FormElementsConditionallyShown\n hasAttemptedSubmit: boolean\n}) {\n const scrollToTopOfPageHTMLElementRef = React.useRef<HTMLDivElement>(null)\n const [visitedPageIds, setVisitedPageIds] = React.useState<string[]>([])\n\n const [isStepsHeaderActive, , closeStepsNavigation, toggleStepsNavigation] =\n useBooleanState(false)\n\n const visiblePages = React.useMemo<FormTypes.PageElement[]>(() => {\n return pages.filter((pageElement) => {\n return !formElementsConditionallyShown?.[pageElement.id]?.isHidden\n })\n }, [formElementsConditionallyShown, pages])\n\n const [currentPageId, setCurrentPageId] = React.useState(visiblePages[0].id)\n\n const currentPage = React.useMemo(() => {\n const currentPageById = visiblePages.find((pageElement) => {\n return pageElement.id === currentPageId\n })\n if (currentPageById) {\n return currentPageById\n } else {\n return visiblePages[0]\n }\n }, [currentPageId, visiblePages])\n\n const currentPageIndex = React.useMemo(\n () => visiblePages.indexOf(currentPage),\n [currentPage, visiblePages],\n )\n\n const currentPageNumber = React.useMemo(() => {\n if (currentPage) {\n return visiblePages.indexOf(currentPage) + 1\n }\n }, [currentPage, visiblePages])\n\n const isShowingMultiplePages = visiblePages.length > 1\n\n const setPageId = React.useCallback(\n (pageId: string) => {\n setVisitedPageIds((currentVisitedPageIds) => {\n if (currentVisitedPageIds.includes(currentPageId)) {\n return currentVisitedPageIds\n } else {\n return [...currentVisitedPageIds, currentPageId]\n }\n })\n setCurrentPageId(pageId)\n closeStepsNavigation()\n\n const scrollToTopOfPageHTMLElement =\n scrollToTopOfPageHTMLElementRef.current\n if (isShowingMultiplePages && scrollToTopOfPageHTMLElement) {\n if (scrollToTopOfPageHTMLElement) {\n window.requestAnimationFrame(() => {\n scrollToTopOfPageHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n const stepItemHTMLElement = document.getElementById(\n `steps-navigation-step-${pageId}`,\n )\n if (stepItemHTMLElement) {\n window.requestAnimationFrame(() => {\n stepItemHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n //blur prev/next buttons after they've been clicked\n const activeElement = document?.activeElement as HTMLElement\n activeElement.blur()\n }\n },\n [closeStepsNavigation, currentPageId, isShowingMultiplePages],\n )\n\n const goToNextPage = React.useCallback(() => {\n for (let i = 0; i < visiblePages.length; i++) {\n const page = visiblePages[i]\n if (page.id === currentPageId) {\n const nextVisiblePage = visiblePages[i + 1]\n if (nextVisiblePage) {\n setPageId(nextVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const goToPreviousPage = React.useCallback(() => {\n for (let i = visiblePages.length - 1; i > -1; i--) {\n const page = visiblePages[i]\n if (page && page.id === currentPageId) {\n const previousVisiblePage = visiblePages[i - 1]\n if (previousVisiblePage) {\n setPageId(previousVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const checkDisplayPageError = React.useCallback(\n (page: FormTypes.PageElement) => {\n // If we have not visited the page yet, we will not display errors\n if (!visitedPageIds.includes(page.id) && !hasAttemptedSubmit) {\n return false\n }\n\n return checkSectionValidity(page, formElementsValidation)\n },\n [formElementsValidation, visitedPageIds, hasAttemptedSubmit],\n )\n\n React.useEffect(() => {\n if (isStepsHeaderActive) {\n scrollingService.disableScrolling()\n\n const activeStepElement = document.getElementById(\n `steps-navigation-step-${currentPageId}`,\n )\n\n if (activeStepElement) {\n activeStepElement.scrollIntoView({\n behavior: 'smooth',\n block: 'start',\n })\n }\n } else {\n // Re-enable scroll on body when inactive\n scrollingService.enableScrolling()\n }\n }, [currentPageId, isStepsHeaderActive])\n\n const firstVisiblePage = visiblePages[0]\n const lastVisiblePage = visiblePages[visiblePages.length - 1]\n const isLastVisiblePage =\n lastVisiblePage && lastVisiblePage.id === currentPageId\n const isFirstVisiblePage =\n firstVisiblePage && firstVisiblePage.id === currentPageId\n const isDisplayingCurrentPageError = checkDisplayPageError(currentPage)\n\n // Clean up when form is navigated away\n React.useEffect(() => {\n return () => {\n scrollingService.enableScrolling()\n }\n }, [])\n\n return {\n visiblePages,\n isFirstVisiblePage,\n isLastVisiblePage,\n isDisplayingCurrentPageError,\n isShowingMultiplePages,\n isStepsHeaderActive,\n toggleStepsNavigation,\n currentPageIndex,\n currentPage,\n currentPageNumber,\n checkDisplayPageError,\n setPageId,\n goToPreviousPage,\n goToNextPage,\n scrollToTopOfPageHTMLElementRef,\n }\n}\n"]}
1
+ {"version":3,"file":"usePages.js","sourceRoot":"","sources":["../../src/hooks/usePages.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport { checkSectionValidity } from '../services/form-validation/validators'\nimport scrollingService from '../services/scrolling-service'\nimport {\n FormElementsConditionallyShown,\n FormElementsValidation,\n} from '../types/form'\n\nexport default function usePages({\n pages,\n formElementsValidation,\n formElementsConditionallyShown,\n hasAttemptedSubmit,\n}: {\n pages: FormTypes.PageElement[]\n formElementsValidation: FormElementsValidation | undefined\n formElementsConditionallyShown: FormElementsConditionallyShown\n hasAttemptedSubmit: boolean\n}) {\n const scrollToTopOfPageHTMLElementRef = React.useRef<HTMLDivElement>(null)\n const [visitedPageIds, setVisitedPageIds] = React.useState<string[]>([])\n\n const [isStepsHeaderActive, , closeStepsNavigation, toggleStepsNavigation] =\n useBooleanState(false)\n\n const visiblePages = React.useMemo<FormTypes.PageElement[]>(() => {\n return pages.filter((pageElement) => {\n return !formElementsConditionallyShown?.[pageElement.id]?.isHidden\n })\n }, [formElementsConditionallyShown, pages])\n\n const [currentPageId, setCurrentPageId] = React.useState(visiblePages[0].id)\n\n const currentPage = React.useMemo(() => {\n const currentPageById = visiblePages.find((pageElement) => {\n return pageElement.id === currentPageId\n })\n if (currentPageById) {\n return currentPageById\n } else {\n return visiblePages[0]\n }\n }, [currentPageId, visiblePages])\n\n const currentPageIndex = React.useMemo(\n () => visiblePages.indexOf(currentPage),\n [currentPage, visiblePages],\n )\n\n const currentPageNumber = React.useMemo(() => {\n if (currentPage) {\n return visiblePages.indexOf(currentPage) + 1\n }\n }, [currentPage, visiblePages])\n\n const isShowingMultiplePages = visiblePages.length > 1\n\n const setPageId = React.useCallback(\n (pageId: string) => {\n setVisitedPageIds((currentVisitedPageIds) => {\n if (currentVisitedPageIds.includes(currentPageId)) {\n return currentVisitedPageIds\n } else {\n return [...currentVisitedPageIds, currentPageId]\n }\n })\n setCurrentPageId(pageId)\n closeStepsNavigation()\n\n const scrollToTopOfPageHTMLElement =\n scrollToTopOfPageHTMLElementRef.current\n if (isShowingMultiplePages && scrollToTopOfPageHTMLElement) {\n if (scrollToTopOfPageHTMLElement) {\n window.requestAnimationFrame(() => {\n scrollToTopOfPageHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n const stepItemHTMLElement = document.getElementById(\n `steps-navigation-step-${pageId}`,\n )\n if (stepItemHTMLElement) {\n window.requestAnimationFrame(() => {\n stepItemHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n //blur prev/next buttons after they've been clicked\n const activeElement = document?.activeElement as HTMLElement\n activeElement.blur()\n }\n },\n [closeStepsNavigation, currentPageId, isShowingMultiplePages],\n )\n\n const goToNextPage = React.useCallback(() => {\n for (let i = 0; i < visiblePages.length; i++) {\n const page = visiblePages[i]\n if (page.id === currentPageId) {\n const nextVisiblePage = visiblePages[i + 1]\n if (nextVisiblePage) {\n setPageId(nextVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const goToPreviousPage = React.useCallback(() => {\n for (let i = visiblePages.length - 1; i > -1; i--) {\n const page = visiblePages[i]\n if (page && page.id === currentPageId) {\n const previousVisiblePage = visiblePages[i - 1]\n if (previousVisiblePage) {\n setPageId(previousVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const checkDisplayPageError = React.useCallback(\n (page: FormTypes.PageElement) => {\n // If we have not visited the page yet, we will not display errors\n if (!visitedPageIds.includes(page.id) && !hasAttemptedSubmit) {\n return false\n }\n\n return checkSectionValidity(page, formElementsValidation)\n },\n [formElementsValidation, visitedPageIds, hasAttemptedSubmit],\n )\n\n React.useEffect(() => {\n if (isStepsHeaderActive) {\n scrollingService.disableScrolling()\n\n const activeStepElement = document.getElementById(\n `steps-navigation-step-${currentPageId}`,\n )\n\n if (activeStepElement) {\n activeStepElement.scrollIntoView({\n behavior: 'smooth',\n block: 'start',\n })\n }\n } else {\n // Re-enable scroll on body when inactive\n scrollingService.enableScrolling()\n }\n }, [currentPageId, isStepsHeaderActive])\n\n const firstVisiblePage = visiblePages[0]\n const lastVisiblePage = visiblePages[visiblePages.length - 1]\n const isLastVisiblePage =\n lastVisiblePage && lastVisiblePage.id === currentPageId\n const isFirstVisiblePage =\n firstVisiblePage && firstVisiblePage.id === currentPageId\n const isDisplayingCurrentPageError = checkDisplayPageError(currentPage)\n\n // Clean up when form is navigated away\n React.useEffect(() => {\n return () => {\n scrollingService.enableScrolling()\n }\n }, [])\n\n return {\n visiblePages,\n isFirstVisiblePage,\n isLastVisiblePage,\n isDisplayingCurrentPageError,\n isShowingMultiplePages,\n isStepsHeaderActive,\n toggleStepsNavigation,\n currentPageIndex,\n currentPage,\n currentPageNumber,\n checkDisplayPageError,\n setPageId,\n goToPreviousPage,\n goToNextPage,\n scrollToTopOfPageHTMLElementRef,\n }\n}\n"]}