@oneblink/apps-react 2.11.0-beta.4 → 2.11.0-beta.6

package/dist/services/form-validation.js

@@ -3,6 +3,8 @@ import { localisationService } from '@oneblink/apps';
 import { parseDateValue } from './generate-default-data';
 import generateCivicaNameRecordElements from './generateCivicaNameRecordElements';
 import generateFreshdeskDependentFieldElements from './generateFreshdeskDependentFieldElements';
+import cleanFormSubmissionModel from './cleanFormSubmissionModel';
+import getDateRangeConfiguration from './getDateRangeConfiguration';
 export const lookupValidationMessage = 'Lookup is required';
 // https://validatejs.org/#validators-datetime
 // Before using it we must add the parse and format functions
@@ -19,10 +21,12 @@ validate.extend(validate.validators.datetime, {
         return options.format(dateValue);
     },
 });
-validate.validators.entries = function (value, { setSchema, entrySchema, }) {
+validate.validators.entries = function (value, { setSchema, entrySchema: { schema: entrySchema, formElementConditionallyShown }, }) {
     const entries = Array.isArray(value) ? value : [];
     const entryErrors = entries.reduce((errorsByIndex, entry, index) => {
-        const entryValidation = validateSingleMessageError(entry, entrySchema);
+        const entryValidation = validateSubmission(entrySchema, entry, (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.type) === 'repeatableSet'
+            ? formElementConditionallyShown.entries[index.toString()]
+            : undefined);
         if (entryValidation) {
             errorsByIndex[index] = entryValidation;
         }
@@ -38,8 +42,10 @@ validate.validators.entries = function (value, { setSchema, entrySchema, }) {
         entries: entryErrors,
     };
 };
-validate.validators.nestedElements = function (value, schema) {
-    const errors = validateSingleMessageError(value || {}, schema);
+validate.validators.nestedElements = function (value, { schema, formElementConditionallyShown }) {
+    const errors = validateSubmission(schema, value, (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.type) === 'formElements'
+        ? formElementConditionallyShown.formElements
+        : undefined);
     if (!errors) {
         return;
     }
@@ -125,418 +131,378 @@ function getCustomRegexFormatConfig(formElement) {
         }
         : undefined;
 }
-export function validateSubmission(schema, submission, formElementsConditionallyShown) {
-    const formElementsValidation = validateSingleMessageError(submission, schema);
-    if (formElementsValidation) {
-        clearValidationMessagesForHiddenElements(formElementsValidation, formElementsConditionallyShown);
-        if (!validate.isEmpty(formElementsValidation)) {
-            return formElementsValidation;
-        }
-    }
-}
-const clearValidationMessagesForHiddenElements = (formElementsValidation, formElementsConditionallyShown) => {
-    // If there is no validation to check, there are no invalid elements
-    // If there is no conditionally shown elements, all invalid elements should display validation messages,
-    if (!formElementsValidation || !formElementsConditionallyShown) {
-        return;
-    }
-    for (const key in formElementsValidation) {
-        const formElementValidation = formElementsValidation[key];
-        if (!formElementValidation) {
-            continue;
-        }
-        const formElementConditionallyShown = formElementsConditionallyShown[key];
-        // If the validation is for an element that is being hidden,
-        // we can remove the validation message and move to the next validation
-        if (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.isHidden) {
-            delete formElementsValidation[key];
-            continue;
-        }
-        // If the validation is for a single element (not nested elements),
-        // we will always show the validation message
-        if (typeof formElementValidation === 'string') {
-            continue;
-        }
-        // Here we will check to see if the nested elements that are
-        // invalid are being shown, if not, remove validation messages
-        switch (formElementValidation.type) {
-            case 'repeatableSet': {
-                for (const index in formElementValidation.entries) {
-                    clearValidationMessagesForHiddenElements(formElementValidation.entries[index], formElementConditionallyShown &&
-                        formElementConditionallyShown.type === 'repeatableSet'
-                        ? formElementConditionallyShown.entries[index]
-                        : undefined);
-                    if (validate.isEmpty(formElementValidation.entries[index])) {
-                        delete formElementValidation.entries[index];
-                    }
-                }
-                // Remove the validation if all entries are valid and the set is also valid
-                if (validate.isEmpty(formElementValidation.entries) &&
-                    !formElementValidation.set) {
-                    delete formElementsValidation[key];
-                }
-                break;
-            }
-            case 'formElements': {
-                clearValidationMessagesForHiddenElements(formElementValidation.formElements, (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.type) === 'formElements'
-                    ? formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.formElements
-                    : undefined);
-                if (validate.isEmpty(formElementValidation.formElements)) {
-                    delete formElementsValidation[key];
-                }
-                break;
-            }
-        }
-    }
-};
 const presence = ({ required, requiredMessage }, message) => (required ? { message: requiredMessage || message } : false);
 const escapeElementName = (elementName) => {
     const escapedName = elementName.replace(/\./g, '\\.');
     return escapedName;
 };
+function getCleanDateRangeConfiguration(options, elements, submission, formElementsConditionallyShown) {
+    if (options.referenceFormElementId && submission) {
+        const { model } = cleanFormSubmissionModel(submission, elements, formElementsConditionallyShown, true);
+        return getDateRangeConfiguration(options, elements, model);
+    }
+    return [options.date, options.daysOffset];
+}
 export function generateValidationSchema(elements, elementIdsWithLookupsExecuted) {
     return elements.reduce((partialSchema, formElement) => {
-        var _a;
         switch (formElement.type) {
+            // Elements that do not need to be validated
             case 'summary':
             case 'calculation':
             case 'image':
             case 'html':
             case 'infoPage':
             case 'heading': {
-                break;
-            }
-            case 'section':
-            case 'page': {
-                const nestedSchema = generateValidationSchema(formElement.elements, elementIdsWithLookupsExecuted);
-                Object.assign(partialSchema, nestedSchema);
-                break;
-            }
-            case 'draw': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    attachment: true,
-                    presence: presence(formElement, 'A saved signature is required'),
-                };
-                break;
-            }
-            case 'camera': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    attachment: true,
-                    presence: presence(formElement, 'A photo is required'),
-                };
-                break;
-            }
-            case 'captcha': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence({ ...formElement, required: true }, 'Please complete the CAPTCHA successfully'),
-                };
-                break;
-            }
-            case 'location': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please select a location'),
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                };
-                break;
-            }
-            case 'compliance': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Required'),
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                    attachments: true,
-                };
-                break;
-            }
-            case 'checkboxes': {
-                const requiredAllDefaultMessage = 'All options are required';
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence({
-                        ...formElement,
-                        required: formElement.required || !!formElement.requiredAll,
-                    }, formElement.requiredAll ? requiredAllDefaultMessage : 'Required'),
-                    length: formElement.requiredAll
-                        ? {
-                            is: (_a = formElement.options) === null || _a === void 0 ? void 0 : _a.length,
-                            message: formElement.requiredMessage || requiredAllDefaultMessage,
-                        }
-                        : undefined,
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                };
-                break;
-            }
-            case 'abn':
-            case 'geoscapeAddress':
-            case 'pointAddress':
-            case 'civicaStreetName':
-            case 'autocomplete':
-            case 'radio':
-            case 'select': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Required'),
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                };
-                break;
-            }
-            case 'boolean': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    isTrue: formElement.required && 'Required',
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                };
-                break;
+                return partialSchema;
             }
-            case 'bsb': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please enter a BSB number'),
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                    format: {
-                        pattern: /\d{3}-\d{3}/,
-                        message: 'Please enter a valid BSB number',
-                    },
-                };
-                break;
-            }
-            case 'barcodeScanner': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please scan a barcode or enter a value'),
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                    format: getCustomRegexFormatConfig(formElement),
-                };
-                break;
-            }
-            case 'text':
-            case 'textarea': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please enter a value'),
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                    length: {
-                        minimum: formElement.minLength,
-                        tooShort: 'Please enter a value with at least %{count} character(s)',
-                        maximum: formElement.maxLength,
-                        tooLong: 'Please enter a value with %{count} character(s) or less',
-                    },
-                    format: getCustomRegexFormatConfig(formElement),
-                };
-                break;
-            }
-            case 'telephone': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please enter a phone number'),
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                    format: getCustomRegexFormatConfig(formElement),
-                };
-                break;
-            }
-            case 'email': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please enter an email address'),
-                    email: {
-                        message: 'Please enter a valid email for this field',
-                    },
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                    format: getCustomRegexFormatConfig(formElement),
-                };
-                break;
-            }
-            case 'time': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please select a time'),
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                };
-                break;
-            }
-            case 'date': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please select a date'),
-                    date: {
-                        format: (v) => localisationService.formatDate(v),
-                        earliest: parseDateValue({
-                            dateOnly: true,
-                            daysOffset: formElement.fromDateDaysOffset,
-                            value: formElement.fromDate,
-                        }),
-                        latest: parseDateValue({
-                            dateOnly: true,
-                            daysOffset: formElement.toDateDaysOffset,
-                            value: formElement.toDate,
-                        }),
-                        notValid: 'Please select a valid date',
-                        tooEarly: 'Date cannot be before %{date}',
-                        tooLate: 'Date cannot be after %{date}',
-                    },
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                };
-                break;
-            }
-            case 'datetime': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: presence(formElement, 'Please select a date and time'),
-                    datetime: {
-                        format: (v) => localisationService.formatDatetime(v),
-                        earliest: parseDateValue({
-                            dateOnly: false,
-                            daysOffset: formElement.fromDateDaysOffset,
-                            value: formElement.fromDate,
-                        }),
-                        latest: parseDateValue({
-                            dateOnly: false,
-                            daysOffset: formElement.toDateDaysOffset,
-                            value: formElement.toDate,
-                        }),
-                        notValid: 'Please select a valid date and time',
-                        tooEarly: 'Date and time cannot be before %{date}',
-                        tooLate: 'Date and time cannot be after %{date}',
-                    },
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                };
-                break;
+        }
+        const constraint = (value, submission, propertyName, { formElementsConditionallyShown }) => {
+            var _a;
+            // If the element is current hidden, we do not need to apply validation
+            const formElementConditionallyShown = formElementsConditionallyShown === null || formElementsConditionallyShown === void 0 ? void 0 : formElementsConditionallyShown[formElement.name];
+            if (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.isHidden) {
+                return;
             }
-            case 'number': {
-                let minErrorMessage = 'Please enter a number greater than or equal to %{count}';
-                let maxErrorMessage = 'Please enter a number less than or equal to %{count}';
-                if (typeof formElement.minNumber === 'number' &&
-                    typeof formElement.maxNumber === 'number') {
-                    minErrorMessage =
-                        maxErrorMessage = `Please enter a number between ${formElement.minNumber} and ${formElement.maxNumber}`;
+            switch (formElement.type) {
+                case 'draw': {
+                    return {
+                        attachment: true,
+                        presence: presence(formElement, 'A saved signature is required'),
+                    };
                 }
-                partialSchema[escapeElementName(formElement.name)] = {
-                    type: 'number',
-                    presence: presence(formElement, 'Please enter a number'),
-                    numericality: {
-                        greaterThanOrEqualTo: formElement.minNumber,
-                        notGreaterThanOrEqualTo: minErrorMessage,
-                        lessThanOrEqualTo: formElement.maxNumber,
-                        notLessThanOrEqualTo: maxErrorMessage,
-                        onlyInteger: formElement.isInteger,
-                        notInteger: 'Please enter a whole number',
-                    },
-                    lookups: {
-                        formElement,
-                        elementIdsWithLookupsExecuted,
-                    },
-                    numberRegex: getCustomRegexFormatConfig(formElement),
-                };
-                break;
-            }
-            case 'files': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    presence: formElement.minEntries
-                        ? {
-                            message: `Please upload at least ${formElement.minEntries} file${formElement.minEntries === 1 ? '' : 's'}`,
-                        }
-                        : false,
-                    length: {
-                        minimum: formElement.minEntries,
-                        maximum: formElement.maxEntries,
-                        tooLong: 'Cannot upload more than %{count} file(s)',
-                        tooShort: 'Please upload at least %{count} file(s)',
-                    },
-                    type: {
-                        type: (files) => {
-                            return (!Array.isArray(files) ||
-                                files.every((file) => {
-                                    return checkFileNameIsValid(formElement, file.fileName);
-                                }));
+                case 'camera': {
+                    return {
+                        attachment: true,
+                        presence: presence(formElement, 'A photo is required'),
+                    };
+                }
+                case 'captcha': {
+                    return {
+                        presence: presence({ ...formElement, required: true }, 'Please complete the CAPTCHA successfully'),
+                    };
+                }
+                case 'location': {
+                    return {
+                        presence: presence(formElement, 'Please select a location'),
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
                         },
-                        message: `Only the following file types are accepted: ${(formElement.restrictedFileTypes || []).join(', ')}`,
-                    },
-                    needsExtension: formElement,
-                    attachments: true,
-                };
-                break;
-            }
-            case 'repeatableSet': {
-                partialSchema[escapeElementName(formElement.name)] = {
-                    entries: {
-                        setSchema: {
-                            presence: formElement.minSetEntries
-                                ? {
-                                    message: `Must have at least ${formElement.minSetEntries} ${formElement.minSetEntries === 1 ? 'entry' : 'entries'}`,
-                                }
-                                : false,
-                            length: {
-                                minimum: formElement.minSetEntries,
-                                maximum: formElement.maxSetEntries,
-                                tooLong: 'Cannot have more than %{count} entry/entries',
-                                tooShort: 'Must have at least %{count} entry/entries',
+                    };
+                }
+                case 'compliance': {
+                    return {
+                        presence: presence(formElement, 'Required'),
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                        attachments: true,
+                    };
+                }
+                case 'checkboxes': {
+                    const requiredAllDefaultMessage = 'All options are required';
+                    return {
+                        presence: presence({
+                            ...formElement,
+                            required: formElement.required || !!formElement.requiredAll,
+                        }, formElement.requiredAll ? requiredAllDefaultMessage : 'Required'),
+                        length: formElement.requiredAll
+                            ? {
+                                is: (_a = formElement.options) === null || _a === void 0 ? void 0 : _a.length,
+                                message: formElement.requiredMessage || requiredAllDefaultMessage,
+                            }
+                            : undefined,
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                    };
+                }
+                case 'abn':
+                case 'geoscapeAddress':
+                case 'pointAddress':
+                case 'civicaStreetName':
+                case 'autocomplete':
+                case 'radio':
+                case 'select': {
+                    return {
+                        presence: presence(formElement, 'Required'),
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                    };
+                }
+                case 'boolean': {
+                    return {
+                        isTrue: formElement.required && 'Required',
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                    };
+                }
+                case 'bsb': {
+                    return {
+                        presence: presence(formElement, 'Please enter a BSB number'),
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                        format: {
+                            pattern: /\d{3}-\d{3}/,
+                            message: 'Please enter a valid BSB number',
+                        },
+                    };
+                }
+                case 'barcodeScanner': {
+                    return {
+                        presence: presence(formElement, 'Please scan a barcode or enter a value'),
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                        format: getCustomRegexFormatConfig(formElement),
+                    };
+                }
+                case 'text':
+                case 'textarea': {
+                    return {
+                        presence: presence(formElement, 'Please enter a value'),
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                        length: {
+                            minimum: formElement.minLength,
+                            tooShort: 'Please enter a value with at least %{count} character(s)',
+                            maximum: formElement.maxLength,
+                            tooLong: 'Please enter a value with %{count} character(s) or less',
+                        },
+                        format: getCustomRegexFormatConfig(formElement),
+                    };
+                }
+                case 'telephone': {
+                    return {
+                        presence: presence(formElement, 'Please enter a phone number'),
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                        format: getCustomRegexFormatConfig(formElement),
+                    };
+                }
+                case 'email': {
+                    return {
+                        presence: presence(formElement, 'Please enter an email address'),
+                        email: {
+                            message: 'Please enter a valid email for this field',
+                        },
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                        format: getCustomRegexFormatConfig(formElement),
+                    };
+                }
+                case 'time': {
+                    return {
+                        presence: presence(formElement, 'Please select a time'),
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                    };
+                }
+                case 'date': {
+                    const [fromDate, fromDateDaysOffset] = getCleanDateRangeConfiguration({
+                        date: formElement.fromDate,
+                        daysOffset: formElement.fromDateDaysOffset,
+                        referenceFormElementId: formElement.fromDateElementId,
+                    }, elements, submission, formElementsConditionallyShown);
+                    const [toDate, toDateDaysOffset] = getCleanDateRangeConfiguration({
+                        date: formElement.toDate,
+                        daysOffset: formElement.toDateDaysOffset,
+                        referenceFormElementId: formElement.toDateElementId,
+                    }, elements, submission, formElementsConditionallyShown);
+                    return {
+                        presence: presence(formElement, 'Please select a date'),
+                        date: {
+                            format: (v) => localisationService.formatDate(v),
+                            earliest: parseDateValue({
+                                dateOnly: true,
+                                daysOffset: fromDateDaysOffset,
+                                value: fromDate,
+                            }),
+                            latest: parseDateValue({
+                                dateOnly: true,
+                                daysOffset: toDateDaysOffset,
+                                value: toDate,
+                            }),
+                            notValid: 'Please select a valid date',
+                            tooEarly: 'Date cannot be before %{date}',
+                            tooLate: 'Date cannot be after %{date}',
+                        },
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                    };
+                }
+                case 'datetime': {
+                    const [fromDate, fromDateDaysOffset] = getCleanDateRangeConfiguration({
+                        date: formElement.fromDate,
+                        daysOffset: formElement.fromDateDaysOffset,
+                        referenceFormElementId: formElement.fromDateElementId,
+                    }, elements, submission, formElementsConditionallyShown);
+                    const [toDate, toDateDaysOffset] = getCleanDateRangeConfiguration({
+                        date: formElement.toDate,
+                        daysOffset: formElement.toDateDaysOffset,
+                        referenceFormElementId: formElement.toDateElementId,
+                    }, elements, submission, formElementsConditionallyShown);
+                    return {
+                        presence: presence(formElement, 'Please select a date and time'),
+                        datetime: {
+                            format: (v) => localisationService.formatDatetime(v),
+                            earliest: parseDateValue({
+                                dateOnly: true,
+                                daysOffset: fromDateDaysOffset,
+                                value: fromDate,
+                            }),
+                            latest: parseDateValue({
+                                dateOnly: true,
+                                daysOffset: toDateDaysOffset,
+                                value: toDate,
+                            }),
+                            notValid: 'Please select a valid date and time',
+                            tooEarly: 'Date and time cannot be before %{date}',
+                            tooLate: 'Date and time cannot be after %{date}',
+                        },
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                    };
+                }
+                case 'number': {
+                    let minErrorMessage = 'Please enter a number greater than or equal to %{count}';
+                    let maxErrorMessage = 'Please enter a number less than or equal to %{count}';
+                    if (typeof formElement.minNumber === 'number' &&
+                        typeof formElement.maxNumber === 'number') {
+                        minErrorMessage =
+                            maxErrorMessage = `Please enter a number between ${formElement.minNumber} and ${formElement.maxNumber}`;
+                    }
+                    return {
+                        type: 'number',
+                        presence: presence(formElement, 'Please enter a number'),
+                        numericality: {
+                            greaterThanOrEqualTo: formElement.minNumber,
+                            notGreaterThanOrEqualTo: minErrorMessage,
+                            lessThanOrEqualTo: formElement.maxNumber,
+                            notLessThanOrEqualTo: maxErrorMessage,
+                            onlyInteger: formElement.isInteger,
+                            notInteger: 'Please enter a whole number',
+                        },
+                        lookups: {
+                            formElement,
+                            elementIdsWithLookupsExecuted,
+                        },
+                        numberRegex: getCustomRegexFormatConfig(formElement),
+                    };
+                }
+                case 'files': {
+                    return {
+                        presence: formElement.minEntries
+                            ? {
+                                message: `Please upload at least ${formElement.minEntries} file${formElement.minEntries === 1 ? '' : 's'}`,
+                            }
+                            : false,
+                        length: {
+                            minimum: formElement.minEntries,
+                            maximum: formElement.maxEntries,
+                            tooLong: 'Cannot upload more than %{count} file(s)',
+                            tooShort: 'Please upload at least %{count} file(s)',
+                        },
+                        type: {
+                            type: (files) => {
+                                return (!Array.isArray(files) ||
+                                    files.every((file) => {
+                                        return checkFileNameIsValid(formElement, file.fileName);
+                                    }));
                             },
+                            message: `Only the following file types are accepted: ${(formElement.restrictedFileTypes || []).join(', ')}`,
                         },
-                        entrySchema: generateValidationSchema(formElement.elements, elementIdsWithLookupsExecuted),
-                    },
-                };
-                break;
-            }
-            case 'civicaNameRecord': {
-                const nestedElements = generateCivicaNameRecordElements(formElement, []);
-                partialSchema[escapeElementName(formElement.name)] = {
-                    nestedElements: generateValidationSchema(nestedElements, elementIdsWithLookupsExecuted),
-                };
-                break;
-            }
-            case 'form': {
-                if (formElement.elements) {
-                    partialSchema[escapeElementName(formElement.name)] = {
-                        nestedElements: generateValidationSchema(formElement.elements, elementIdsWithLookupsExecuted),
+                        needsExtension: formElement,
+                        attachments: true,
                     };
                 }
-                break;
-            }
-            case 'freshdeskDependentField': {
-                const nestedElements = generateFreshdeskDependentFieldElements(formElement, undefined);
-                partialSchema[escapeElementName(formElement.name)] = {
-                    nestedElements: generateValidationSchema(nestedElements, elementIdsWithLookupsExecuted),
-                };
-                break;
-            }
-            default: {
-                console.info('Unsupported form element with validation', formElement);
+                case 'repeatableSet': {
+                    return {
+                        entries: {
+                            setSchema: {
+                                presence: formElement.minSetEntries
+                                    ? {
+                                        message: `Must have at least ${formElement.minSetEntries} ${formElement.minSetEntries === 1 ? 'entry' : 'entries'}`,
+                                    }
+                                    : false,
+                                length: {
+                                    minimum: formElement.minSetEntries,
+                                    maximum: formElement.maxSetEntries,
+                                    tooLong: 'Cannot have more than %{count} entry/entries',
+                                    tooShort: 'Must have at least %{count} entry/entries',
+                                },
+                            },
+                            entrySchema: {
+                                schema: generateValidationSchema(formElement.elements, elementIdsWithLookupsExecuted),
+                                formElementConditionallyShown: formElementsConditionallyShown === null || formElementsConditionallyShown === void 0 ? void 0 : formElementsConditionallyShown[formElement.name],
+                            },
+                        },
+                    };
+                }
+                case 'civicaNameRecord': {
+                    const nestedElements = generateCivicaNameRecordElements(formElement, []);
+                    return {
+                        nestedElements: {
+                            schema: generateValidationSchema(nestedElements, elementIdsWithLookupsExecuted),
+                            formElementConditionallyShown: formElementsConditionallyShown === null || formElementsConditionallyShown === void 0 ? void 0 : formElementsConditionallyShown[formElement.name],
+                        },
+                    };
+                }
+                case 'form': {
+                    if (formElement.elements) {
+                        return {
+                            nestedElements: {
+                                schema: generateValidationSchema(formElement.elements, elementIdsWithLookupsExecuted),
+                                formElementConditionallyShown: formElementsConditionallyShown === null || formElementsConditionallyShown === void 0 ? void 0 : formElementsConditionallyShown[formElement.name],
+                            },
+                        };
+                    }
+                    break;
+                }
+                case 'freshdeskDependentField': {
+                    const nestedElements = generateFreshdeskDependentFieldElements(formElement, undefined);
+                    return {
+                        nestedElements: {
+                            schema: generateValidationSchema(nestedElements, elementIdsWithLookupsExecuted),
+                            formElementConditionallyShown: formElementsConditionallyShown === null || formElementsConditionallyShown === void 0 ? void 0 : formElementsConditionallyShown[formElement.name],
+                        },
+                    };
+                }
+                default: {
+                    console.info('Unsupported form element with validation', formElement);
+                }
             }
-        }
+        };
+        partialSchema[escapeElementName(formElement.name)] = constraint;
         return partialSchema;
     }, {});
 }
-const validateSingleMessageError = (submission, schema) => {
+export function validateSubmission(schema, submission, formElementsConditionallyShown) {
     const errorsAsArray = validate(submission, schema, {
         format: 'grouped',
         fullMessages: false,
+        formElementsConditionallyShown,
     });
     if (!errorsAsArray || validate.isEmpty(errorsAsArray)) {
         return;
@@ -552,7 +518,7 @@ const validateSingleMessageError = (submission, schema) => {
         return;
     }
     return errors;
-};
+}
 export function checkFileNameIsValid(formElement, fileName) {
     const extension = fileName.split('.').pop();
     return (!formElement.restrictedFileTypes ||