@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.
- package/dist/OneBlinkFormBase.js +4 -3
- package/dist/OneBlinkFormBase.js.map +1 -1
- package/dist/PaymentReceipt.js +10 -2
- package/dist/PaymentReceipt.js.map +1 -1
- package/dist/components/calendar-bookings/CalendarBookingsForm.js +15 -8
- package/dist/components/calendar-bookings/CalendarBookingsForm.js.map +1 -1
- package/dist/components/receipts/ReceiptList.js +4 -2
- package/dist/components/receipts/ReceiptList.js.map +1 -1
- package/dist/components/renderer/LookupButton.js +1 -1
- package/dist/components/renderer/LookupButton.js.map +1 -1
- package/dist/components/renderer/attachments/FileCard.js +1 -1
- package/dist/components/renderer/attachments/FileCard.js.map +1 -1
- package/dist/form-elements/FormElementCaptcha.d.ts +1 -1
- package/dist/form-elements/FormElementCaptcha.js +9 -5
- package/dist/form-elements/FormElementCaptcha.js.map +1 -1
- package/dist/form-elements/FormElementFiles.js +1 -1
- package/dist/form-elements/FormElementFiles.js.map +1 -1
- package/dist/form-elements/FormElementSection.js +1 -1
- package/dist/form-elements/FormElementSection.js.map +1 -1
- package/dist/form-elements/OptionButton.js +10 -2
- package/dist/form-elements/OptionButton.js.map +1 -1
- package/dist/hooks/useFormValidation.d.ts +1 -1
- package/dist/hooks/useFormValidation.js +10 -6
- package/dist/hooks/useFormValidation.js.map +1 -1
- package/dist/hooks/usePages.js +1 -1
- package/dist/hooks/usePages.js.map +1 -1
- package/dist/services/form-validation/extensions.d.ts +28 -0
- package/dist/services/form-validation/extensions.js +97 -0
- package/dist/services/form-validation/extensions.js.map +1 -0
- package/dist/services/form-validation/validate-dot-js.d.ts +63 -0
- package/dist/services/form-validation/validate-dot-js.js +328 -0
- package/dist/services/form-validation/validate-dot-js.js.map +1 -0
- package/dist/services/form-validation/validateSubmission.d.ts +11 -0
- package/dist/services/form-validation/validateSubmission.js +503 -0
- package/dist/services/form-validation/validateSubmission.js.map +1 -0
- package/dist/services/form-validation/validators.d.ts +13 -0
- package/dist/services/form-validation/validators.js +70 -0
- package/dist/services/form-validation/validators.js.map +1 -0
- package/dist/services/generateCivicaNameRecordElements.d.ts +1 -1
- package/dist/services/generateCivicaNameRecordElements.js.map +1 -1
- package/dist/styles/option-buttons.scss +5 -0
- package/dist/styles.css +6 -0
- package/dist/styles.scss +1 -0
- package/package.json +5 -5
- package/dist/services/form-validation.d.ts +0 -10
- package/dist/services/form-validation.js +0 -604
- 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
|
-
|
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
|
103
|
-
setBookingError((_a = event.detail.error.message) !== null &&
|
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(
|
9
|
-
React.createElement(MaterialIcon, { className: clsx('has-text-
|
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,
|
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,
|
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 {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,
|
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:
|
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
|
-
|
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
|
-
|
18
|
+
onCaptchaChange(element, {
|
16
19
|
value: val || undefined,
|
17
20
|
});
|
18
|
-
}, [element,
|
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;
|
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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,cAAc,MAAM,qCAAqC,CAAA;AAChE,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,
|
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
|
-
? {
|
7
|
-
|
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;
|
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
|
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
|
35
|
-
return
|
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,
|
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"]}
|
package/dist/hooks/usePages.js
CHANGED
@@ -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":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAA;AAC7E,OAAO,gBAAgB,MAAM,+BAA+B,CAAA;AAM5D,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,sBAAsB,EACtB,8BAA8B,EAC9B,kBAAkB,GAMnB;IACC,MAAM,+BAA+B,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC1E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAA;IAExE,MAAM,CAAC,mBAAmB,EAAE,AAAD,EAAG,oBAAoB,EAAE,qBAAqB,CAAC,GACxE,eAAe,CAAC,KAAK,CAAC,CAAA;IAExB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAA0B,GAAG,EAAE;QAC/D,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE;;YAClC,OAAO,CAAC,CAAA,MAAA,8BAA8B,aAA9B,8BAA8B,uBAA9B,8BAA8B,CAAG,WAAW,CAAC,EAAE,CAAC,0CAAE,QAAQ,CAAA,CAAA;QACpE,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC,CAAA;IAE3C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAE5E,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,MAAM,eAAe,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE;YACxD,OAAO,WAAW,CAAC,EAAE,KAAK,aAAa,CAAA;QACzC,CAAC,CAAC,CAAA;QACF,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,eAAe,CAAA;QACxB,CAAC;aAAM,CAAC;YACN,OAAO,YAAY,CAAC,CAAC,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC,CAAA;IAEjC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CACpC,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,EACvC,CAAC,WAAW,EAAE,YAAY,CAAC,CAC5B,CAAA;IAED,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC3C,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;IAE/B,MAAM,sBAAsB,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAA;IAEtD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,MAAc,EAAE,EAAE;QACjB,iBAAiB,CAAC,CAAC,qBAAqB,EAAE,EAAE;YAC1C,IAAI,qBAAqB,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBAClD,OAAO,qBAAqB,CAAA;YAC9B,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,GAAG,qBAAqB,EAAE,aAAa,CAAC,CAAA;YAClD,CAAC;QACH,CAAC,CAAC,CAAA;QACF,gBAAgB,CAAC,MAAM,CAAC,CAAA;QACxB,oBAAoB,EAAE,CAAA;QAEtB,MAAM,4BAA4B,GAChC,+BAA+B,CAAC,OAAO,CAAA;QACzC,IAAI,sBAAsB,IAAI,4BAA4B,EAAE,CAAC;YAC3D,IAAI,4BAA4B,EAAE,CAAC;gBACjC,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;oBAChC,4BAA4B,CAAC,cAAc,CAAC;wBAC1C,KAAK,EAAE,OAAO;wBACd,QAAQ,EAAE,QAAQ;qBACnB,CAAC,CAAA;gBACJ,CAAC,CAAC,CAAA;YACJ,CAAC;YACD,MAAM,mBAAmB,GAAG,QAAQ,CAAC,cAAc,CACjD,yBAAyB,MAAM,EAAE,CAClC,CAAA;YACD,IAAI,mBAAmB,EAAE,CAAC;gBACxB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;oBAChC,mBAAmB,CAAC,cAAc,CAAC;wBACjC,KAAK,EAAE,OAAO;wBACd,QAAQ,EAAE,QAAQ;qBACnB,CAAC,CAAA;gBACJ,CAAC,CAAC,CAAA;YACJ,CAAC;YACD,mDAAmD;YACnD,MAAM,aAAa,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAA4B,CAAA;YAC5D,aAAa,CAAC,IAAI,EAAE,CAAA;QACtB,CAAC;IACH,CAAC,EACD,CAAC,oBAAoB,EAAE,aAAa,EAAE,sBAAsB,CAAC,CAC9D,CAAA;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;YAC5B,IAAI,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE,CAAC;gBAC9B,MAAM,eAAe,GAAG,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBAC3C,IAAI,eAAe,EAAE,CAAC;oBACpB,SAAS,CAAC,eAAe,CAAC,EAAE,CAAC,CAAA;gBAC/B,CAAC;gBACD,MAAK;YACP,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;IAE5C,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC9C,KAAK,IAAI,CAAC,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAClD,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;YAC5B,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE,CAAC;gBACtC,MAAM,mBAAmB,GAAG,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBAC/C,IAAI,mBAAmB,EAAE,CAAC;oBACxB,SAAS,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAA;gBACnC,CAAC;gBACD,MAAK;YACP,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;IAE5C,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAC7C,CAAC,IAA2B,EAAE,EAAE;QAC9B,kEAAkE;QAClE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7D,OAAO,KAAK,CAAA;QACd,CAAC;QAED,OAAO,oBAAoB,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAA;IAC3D,CAAC,EACD,CAAC,sBAAsB,EAAE,cAAc,EAAE,kBAAkB,CAAC,CAC7D,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,mBAAmB,EAAE,CAAC;YACxB,gBAAgB,CAAC,gBAAgB,EAAE,CAAA;YAEnC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,cAAc,CAC/C,yBAAyB,aAAa,EAAE,CACzC,CAAA;YAED,IAAI,iBAAiB,EAAE,CAAC;gBACtB,iBAAiB,CAAC,cAAc,CAAC;oBAC/B,QAAQ,EAAE,QAAQ;oBAClB,KAAK,EAAE,OAAO;iBACf,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;aAAM,CAAC;YACN,yCAAyC;YACzC,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAExC,MAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;IACxC,MAAM,eAAe,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAC7D,MAAM,iBAAiB,GACrB,eAAe,IAAI,eAAe,CAAC,EAAE,KAAK,aAAa,CAAA;IACzD,MAAM,kBAAkB,GACtB,gBAAgB,IAAI,gBAAgB,CAAC,EAAE,KAAK,aAAa,CAAA;IAC3D,MAAM,4BAA4B,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAA;IAEvE,uCAAuC;IACvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO;QACL,YAAY;QACZ,kBAAkB;QAClB,iBAAiB;QACjB,4BAA4B;QAC5B,sBAAsB;QACtB,mBAAmB;QACnB,qBAAqB;QACrB,gBAAgB;QAChB,WAAW;QACX,iBAAiB;QACjB,qBAAqB;QACrB,SAAS;QACT,gBAAgB;QAChB,YAAY;QACZ,+BAA+B;KAChC,CAAA;AACH,CAAC","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"]}
|