@evoke-platform/ui-components 1.6.0-dev.14 → 1.6.0-dev.16

package/dist/published/components/custom/FormV2/components/FormFieldTypes/AddressFields.d.ts

@@ -0,0 +1,17 @@
+import { InputField, InputParameter, InputParameterReference, Property, ReadonlyField } from '@evoke-platform/context';
+import React from 'react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { Address } from '../../../FormField/AddressFieldComponent';
+interface AddressProps {
+    entry: InputParameterReference | ReadonlyField | InputField;
+    errors?: FieldErrors;
+    handleChange: (propertyId: string, value: string | Address | undefined) => void;
+    fieldHeight?: 'small' | 'medium';
+    readOnly?: boolean;
+    parameters?: InputParameter[];
+    instance?: FieldValues;
+    entryId: string;
+    fieldDefinition: InputParameter | Property;
+}
+declare function AddressFields(props: AddressProps): React.JSX.Element;
+export default AddressFields;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/AddressFields.js

@@ -0,0 +1,50 @@
+import { useApiServices, } from '@evoke-platform/context';
+import React from 'react';
+import { useFormContext } from '../../../../../theme/hooks';
+import { Typography } from '../../../../core';
+import FormField from '../../../FormField';
+import FieldWrapper from '../FieldWrapper';
+import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
+function AddressFields(props) {
+    const { entry, errors, handleChange, fieldHeight, readOnly, parameters, instance, entryId, fieldDefinition } = props;
+    const { getValues } = useFormContext();
+    const apiServices = useApiServices();
+    const addressObject = entryId.split('.')[0];
+    const addressField = entryId.split('.')[1];
+    const addressValues = entry.type === 'readonlyField' ? instance?.[addressObject] : getValues(addressObject);
+    const fieldValue = addressValues?.[addressField];
+    const display = entry?.display;
+    const validation = fieldDefinition?.validation
+        ? fieldDefinition.validation
+        : {};
+    const queryAddresses = async (query) => {
+        return await apiServices.get(getPrefixedUrl(`/locations/search`), {
+            params: { query: query },
+        });
+    };
+    const handleAddressChange = (name, value) => {
+        if (addressField === 'line1' && typeof value === 'object' && value.line1) {
+            const addressKeys = ['line1', 'city', 'county', 'state', 'zipCode'];
+            addressKeys.forEach((key) => {
+                const fullKey = `${addressObject}.${key}`;
+                if (parameters?.some((p) => p.id === fullKey)) {
+                    const fieldValue = value[key];
+                    handleChange(fullKey, fieldValue);
+                }
+            });
+        }
+        else {
+            handleChange(name, value);
+        }
+    };
+    const addressErrors = errors?.[addressObject];
+    const addressFieldError = addressErrors?.[addressField];
+    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "string", label: display?.label || 'default', description: !readOnly ? display?.description : undefined, tooltip: display?.tooltip, value: fieldValue, maxLength: 'maxLength' in validation ? validation?.maxLength : 0, required: fieldDefinition?.required || false, showCharCount: !readOnly && display?.charCount, viewOnly: !!readOnly, prefix: display?.prefix, suffix: display?.suffix }, !readOnly ? (React.createElement(FormField, { property: fieldDefinition, defaultValue: fieldValue, onChange: handleAddressChange, isMultiLineText: !!display?.rowCount, readOnly: entry.type === 'readonlyField', ...(addressField === 'line1' && { queryAddresses }), mask: validation?.mask, placeholder: display?.placeholder, isOptionEqualToValue: isOptionEqualToValue, size: fieldHeight, error: !!addressFieldError, errorMessage: addressFieldError?.message, additionalProps: {
+            ...(display?.description && {
+                inputProps: {
+                    'aria-describedby': `${entryId}-description`,
+                },
+            }),
+        } })) : (React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px', paddingTop: '6px' } }, fieldValue))));
+}
+export default AddressFields;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Criteria.d.ts

@@ -0,0 +1,12 @@
+import { InputParameter, Property } from '@evoke-platform/context';
+import React from 'react';
+type CriteriaProps = {
+    fieldDefinition: InputParameter | Property;
+    value?: CriteriaValue | null;
+    handleChange: (propertyId: string, value: CriteriaValue | null) => void;
+    canUpdateProperty: boolean;
+    error?: boolean;
+};
+type CriteriaValue = Record<string, unknown>;
+export default function Criteria(props: CriteriaProps): React.JSX.Element;
+export {};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Criteria.js

@@ -0,0 +1,94 @@
+import { useApiServices } from '@evoke-platform/context';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../theme/hooks';
+import { Button, CircularProgress, Typography } from '../../../../core';
+import { Box } from '../../../../layout';
+import CriteriaBuilder from '../../../CriteriaBuilder';
+import { addressProperties, getPrefixedUrl } from '../utils';
+export default function Criteria(props) {
+    const { handleChange, value, canUpdateProperty, fieldDefinition, error } = props;
+    const apiServices = useApiServices();
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const [loadingError, setLoadingError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [properties, setProperties] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
+    const fetchProperties = useCallback(async () => {
+        if (fieldDefinition.objectId && !fetchedOptions[`${fieldDefinition.id}Options`]) {
+            setLoading(true);
+            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective/properties`), { params: { fields: ['properties'] } }, (error, properties) => {
+                if (error) {
+                    console.error('Error fetching object properties', error);
+                    setLoadingError(true);
+                }
+                if (properties) {
+                    const flattenProperties = properties.flatMap((prop) => {
+                        if (prop.type === 'object' || prop.type === 'user') {
+                            return [
+                                {
+                                    id: `${prop.id}.id`,
+                                    name: `${prop.name} Id`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.name`,
+                                    name: `${prop.name} Name`,
+                                    type: 'string',
+                                },
+                            ];
+                        }
+                        else if (prop.type === 'address') {
+                            return addressProperties(prop);
+                        }
+                        return prop;
+                    });
+                    setProperties(flattenProperties);
+                    setFetchedOptions((prev) => ({
+                        ...prev,
+                        [`${fieldDefinition.id}Options`]: flattenProperties.map((prop) => ({
+                            id: prop.id,
+                            name: prop.name,
+                        })),
+                    }));
+                    setLoadingError(false);
+                }
+                setLoading(false);
+            });
+        }
+    }, [fieldDefinition.objectId, apiServices]);
+    useEffect(() => {
+        fetchProperties();
+    }, [fetchProperties]);
+    const handleUpdate = (criteria) => {
+        if (criteria || value) {
+            handleChange(fieldDefinition.id, criteria ?? null);
+        }
+    };
+    if (loadingError) {
+        return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+            React.createElement(Typography, { sx: { color: 'rgb(114 124 132)', fontSize: '14px', paddingLeft: '10px' } }, "An error occurred when retrieving data needed for this criteria."),
+            React.createElement(Button, { sx: {
+                    padding: 0,
+                    '&:hover': { backgroundColor: 'transparent' },
+                    minWidth: '44px',
+                }, variant: "text", onClick: fetchProperties, disabled: loading }, "Retry"),
+            loading && React.createElement(CircularProgress, { size: 20, sx: { paddingLeft: '10px' } })));
+    }
+    return !!value || canUpdateProperty ? (React.createElement(Box, { sx: { borderRadius: '8px', border: error ? '1px solid #FF0000' : '1px solid #ddd' } },
+        React.createElement(CriteriaBuilder, { criteria: value ?? undefined, properties: properties, setCriteria: handleUpdate, disabled: !canUpdateProperty, hideBorder: true, presetValues: [
+                {
+                    label: 'Current Date',
+                    value: { name: '{{{currentDate}}}', label: 'Current Date' },
+                    type: 'date',
+                },
+                {
+                    label: 'Current Time',
+                    value: { name: '{{{currentTime}}}', label: 'Current Time' },
+                    type: 'time',
+                },
+                {
+                    label: 'Current Date Time',
+                    value: { name: '{{{currentDateTime}}}', label: 'Current Date Time' },
+                    type: 'date-time',
+                },
+            ], enablePresetValues: true }))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No criteria"));
+}

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Image.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare function blobToDataUrl(blob: Blob): Promise<string>;
+type ImageProps = {
+    id: string;
+    handleChange: (propertyId: string, value: string | null) => void;
+    canUpdateProperty?: boolean;
+    error?: boolean;
+    value?: string;
+    hasDescription?: boolean;
+};
+export declare const Image: (props: ImageProps) => React.JSX.Element;
+export {};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Image.js

@@ -0,0 +1,108 @@
+import { BackupOutlined, ClearRounded } from '@mui/icons-material';
+import { CardMedia } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { IconButton, Typography } from '../../../../core';
+import { Box, Grid } from '../../../../layout';
+export function blobToDataUrl(blob) {
+    const reader = new FileReader();
+    return new Promise((resolve) => {
+        reader.onloadend = () => resolve(reader.result);
+        reader.readAsDataURL(blob);
+    });
+}
+const styles = {
+    imageContainer: {
+        margin: '5px 0',
+        height: '160px',
+        borderRadius: '8px',
+        maxWidth: '100%',
+    },
+    dropzoneContainer: {
+        margin: '5px 0',
+        height: '160px',
+        borderRadius: '8px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px dashed #858585',
+        position: 'relative',
+        cursor: 'pointer',
+    },
+    icon: {
+        color: '#fff',
+        zIndex: 40,
+        fontSize: '16px',
+    },
+    deleteIcon: {
+        borderRadius: '50%',
+        padding: '3px',
+        backgroundColor: '#212B36',
+        ':hover': { backgroundColor: '#212B36', cursor: 'pointer' },
+        color: '#fff',
+        right: '29px',
+        bottom: '138px',
+    },
+    image: {
+        borderRadius: '8px',
+        width: 'fit-content',
+        maxWidth: '95%',
+        height: '160px',
+        position: 'relative',
+        display: 'inline-block',
+        objectFit: 'contain',
+    },
+};
+export const Image = (props) => {
+    const { id, handleChange, canUpdateProperty, error, value, hasDescription } = props;
+    const [image, setImage] = useState();
+    useEffect(() => {
+        if (typeof value === 'string') {
+            setImage(value);
+        }
+    }, [value]);
+    const handleUpload = async (file) => {
+        if (file?.size && file.size <= 300000) {
+            const dataUrl = file ? await blobToDataUrl(file) : null;
+            setImage(dataUrl);
+            handleChange(id, dataUrl);
+        }
+    };
+    const handleRemove = (e) => {
+        setImage(null);
+        handleChange(id, '');
+        e.stopPropagation();
+    };
+    const { getRootProps, getInputProps, open } = useDropzone({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onDrop: (files) => handleUpload(files?.[0]),
+        accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.svg'] },
+    });
+    return (React.createElement(React.Fragment, null, image ? (React.createElement(Box, { sx: styles.imageContainer },
+        React.createElement(Box, { sx: { position: 'relative', left: 0, zIndex: 5 } },
+            React.createElement(CardMedia, { component: "img", image: image, alt: 'Uploaded Image', sx: styles.image }),
+            canUpdateProperty && (React.createElement(IconButton, { onClick: handleRemove, "aria-label": "Remove image", sx: styles.deleteIcon },
+                React.createElement(ClearRounded, { sx: styles.icon })))))) : canUpdateProperty ? (React.createElement(Box, { sx: {
+            ...styles.dropzoneContainer,
+            borderColor: error ? 'red' : '#858585',
+        }, ...getRootProps(), onClick: open },
+        React.createElement("input", { ...getInputProps({ id }), multiple: false, ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
+        React.createElement(Grid, { container: true, sx: { width: '100%' } },
+            React.createElement(Grid, { item: true, xs: 12, sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    paddingBottom: '5px',
+                } },
+                React.createElement(BackupOutlined, { sx: { color: '#919EAB', height: '1.5em', width: '1.5em' } })),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { textAlign: 'center' } },
+                    "Drag and drop or",
+                    ' ',
+                    React.createElement(Typography, { component: 'span', color: 'primary', sx: { fontSize: '14px' } }, "select a file"),
+                    ' ',
+                    "to upload")),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { color: '#637381', textAlign: 'center' } }, "Max file size of 300KB")),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { color: '#637381', textAlign: 'center' } }, "JPG, PNG, or GIF"))))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No image"))));
+};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AutocompleteOption } from '../../../../core';
+export type UserPropertyProps = {
+    id: string;
+    handleChangeUserProperty: (id: string, user: AutocompleteOption) => void;
+    error?: boolean;
+    value?: {
+        id: string;
+        name: string;
+    };
+    fieldHeight?: 'small' | 'medium';
+    readOnly?: boolean;
+    hasDescription?: boolean;
+};
+declare const UserProperty: (props: UserPropertyProps) => React.JSX.Element;
+export default UserProperty;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.js

@@ -0,0 +1,126 @@
+import { useApiServices } from '@evoke-platform/context';
+import { ExpandMore } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../theme/hooks';
+import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
+import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
+const UserProperty = (props) => {
+    const { id, handleChangeUserProperty, error, value, fieldHeight, readOnly, hasDescription } = props;
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const [loadingOptions, setLoadingOptions] = useState(false);
+    const apiServices = useApiServices();
+    const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
+    const [openOptions, setOpenOptions] = useState(false);
+    const [users, setUsers] = useState();
+    const [userValue, setUserValue] = useState();
+    useEffect(() => {
+        if (value && typeof value == 'object' && 'name' in value && 'id' in value) {
+            setUserValue({ label: value.name, value: value.id });
+        }
+        else {
+            setUserValue(undefined);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (!fetchedOptions[`${id}Options`]) {
+            setLoadingOptions(true);
+            apiServices.get(getPrefixedUrl(`/users`), (error, userList) => {
+                setUsers(userList);
+                setOptions((userList ?? []).map((user) => ({
+                    label: user.name,
+                    value: user.id,
+                })));
+                setFetchedOptions((prev) => ({
+                    ...prev,
+                    [`${id}Options`]: (userList ?? []).map((user) => ({
+                        label: user.name,
+                        value: user.id,
+                    })),
+                }));
+                setLoadingOptions(false);
+            });
+        }
+    }, [id]);
+    return (options && (React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue || readOnly ? '' : React.createElement(ExpandMore, null), PaperComponent: ({ children }) => {
+            return (React.createElement(Paper, { sx: {
+                    borderRadius: '12px',
+                    boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
+                    '& .MuiAutocomplete-listbox': {
+                        maxHeight: '25vh',
+                    },
+                    '& .MuiAutocomplete-noOptions': {
+                        fontFamily: 'sans-serif',
+                        fontSize: '14px',
+                        paddingLeft: '24px',
+                        color: 'rgba(145, 158, 171, 1)',
+                    },
+                    '& .MuiAutocomplete-loading': {
+                        fontFamily: 'sans-serif',
+                        fontSize: '14px',
+                        paddingLeft: '24px',
+                        color: 'rgba(145, 158, 171, 1)',
+                    },
+                } }, children));
+        }, sx: {
+            '& button.MuiButtonBase-root': {
+                ...(!loadingOptions && value ? { visibility: 'visible' } : {}),
+            },
+            '.MuiAutocomplete-clearIndicator': {
+                ...(!value ? { display: 'none' } : undefined),
+            },
+        }, noOptionsText: 'No options available', renderOption: (props, option) => {
+            return (React.createElement("li", { ...props, key: option.id },
+                React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } },
+                    option.label,
+                    " ",
+                    '',
+                    users?.find((user) => option.value === user.id)?.status === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
+        }, onOpen: () => {
+            setOpenOptions(true);
+        }, onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
+            if (typeof option === 'string') {
+                return options.find((o) => o.value === option)?.label ?? '';
+            }
+            else {
+                {
+                    if (users?.find((user) => option.value === user.id)?.status === 'Inactive') {
+                        return option.label + ' (Inactive)';
+                    }
+                    else {
+                        return option.label ?? '';
+                    }
+                }
+            }
+        }, onKeyDownCapture: (e) => {
+            // prevents keyboard trap
+            if (e.key === 'Tab') {
+                return;
+            }
+            if (value) {
+                e.preventDefault();
+            }
+        }, loading: loadingOptions, isOptionEqualToValue: isOptionEqualToValue, onChange: (event, value) => {
+            handleChangeUserProperty(id, value);
+        }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: !readOnly ? 'Select' : undefined, readOnly: !loadingOptions && !value && readOnly, inputProps: {
+                ...params.inputProps,
+                ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined),
+            }, sx: {
+                ...(!loadingOptions && value
+                    ? {
+                        '.MuiOutlinedInput-root': {
+                            background: 'white',
+                            border: 'auto',
+                        },
+                        '& fieldset': { borderColor: 'auto' },
+                        '&:hover .MuiOutlinedInput-notchedOutline': {
+                            border: 'auto',
+                        },
+                        caretColor: 'white',
+                        '& svg': {
+                            display: readOnly ? 'none' : 'block',
+                        },
+                    }
+                    : {}),
+            } })), size: fieldHeight ?? 'medium', readOnly: readOnly, error: error })));
+};
+export default UserProperty;

package/dist/published/components/custom/FormV2/components/ValidationFiles/Validation.d.ts

@@ -0,0 +1,3 @@
+import { FormEntry, InputParameter } from '@evoke-platform/context';
+import { FieldValues, UseFormRegister } from 'react-hook-form';
+export declare const handleValidation: (entries: FormEntry[], register: UseFormRegister<FieldValues>, formValues: FieldValues, parameters?: InputParameter[], instance?: FieldValues) => void;

package/dist/published/components/custom/FormV2/components/ValidationFiles/Validation.js

@@ -0,0 +1,164 @@
+import { isArray } from 'lodash';
+import { DateTime } from 'luxon';
+import Handlebars from 'no-eval-handlebars';
+export const handleValidation = (entries, register, formValues, parameters, instance) => {
+    entries?.forEach((entry) => {
+        if (entry.type === 'sections' || entry.type === 'columns') {
+            const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+            subEntries.forEach((subEntry) => {
+                if (subEntry.entries) {
+                    handleValidation(subEntry.entries, register, formValues, parameters, instance);
+                }
+            });
+            return;
+        }
+        else if (entry.type !== 'input' && entry.type !== 'inputField') {
+            return;
+        }
+        const display = entry?.display;
+        const parameter = entry.type === 'input'
+            ? parameters?.find((param) => param.id === entry.parameterId)
+            : entry.type === 'inputField'
+                ? entry.input
+                : undefined;
+        const validation = parameter?.validation || {};
+        const fieldName = display?.label;
+        const errorMsg = validation?.errorMessage;
+        const validationRules = {};
+        // Required fields
+        if (entry.type !== 'inputField' && parameter?.required) {
+            validationRules.required = `${fieldName} is required`;
+        }
+        if (parameter?.type === 'boolean' && parameter?.strictlyTrue) {
+            validationRules.required = {
+                value: true,
+                message: display?.booleanDisplay === 'switch'
+                    ? `${fieldName} must be toggled on`
+                    : `${fieldName} must be checked`,
+            };
+        }
+        // Min/max char string fields
+        if (typeof validation.minLength === 'number') {
+            validationRules.minLength = {
+                value: validation.minLength,
+                message: `${fieldName} must have at least ${validation.minLength} characters`,
+            };
+        }
+        if (typeof validation.maxLength === 'number') {
+            validationRules.maxLength = {
+                value: validation.maxLength,
+                message: `${fieldName} must have no more than ${validation.maxLength} characters`,
+            };
+        }
+        // Min/max number fields
+        if (typeof validation.maximum === 'number') {
+            validationRules.max = {
+                value: validation.maximum,
+                message: errorMsg || `${fieldName} must have a value under ${validation.maximum}`,
+            };
+        }
+        if (typeof validation.minimum === 'number') {
+            validationRules.min = {
+                value: validation.minimum,
+                message: errorMsg || `${fieldName} must have a value over ${validation.minimum}`,
+            };
+        }
+        validationRules.validate = (value) => {
+            if (!value)
+                return true;
+            // Document validation
+            if (validation.maxDocuments || validation.minDocuments) {
+                const amountOfDocuments = isArray(value) ? value.length : 0;
+                const min = validation.minDocuments;
+                const max = validation.maxDocuments;
+                if (max && min && (amountOfDocuments > max || amountOfDocuments < min)) {
+                    return (errorMsg ||
+                        `Please select between ${validation.minDocuments} and ${validation.maxDocuments} document${max > 1 ? 's' : ''}`);
+                }
+                else if (min && amountOfDocuments < min) {
+                    return errorMsg || `Please select at least ${min} document${min > 1 ? 's' : ''}`;
+                }
+                else if (max && amountOfDocuments > max) {
+                    return errorMsg || `Please select no more than ${max} document${max > 1 ? 's' : ''}`;
+                }
+            }
+            // Date and Time validation
+            if (validation.from || validation.to) {
+                const data = {
+                    __today__: DateTime.now().toISODate(),
+                    input: { ...instance, ...formValues },
+                };
+                if (validation.from) {
+                    let earliestAllowed = validation.from;
+                    if (/{{[\w.]+(?:\s+[\w.]+)*(?:\s+\d+)?}}/.test(earliestAllowed)) {
+                        earliestAllowed = Handlebars.compileAST(earliestAllowed)(data);
+                    }
+                    if (earliestAllowed && value < earliestAllowed) {
+                        return (errorMsg ||
+                            `${fieldName} must be ${parameter?.type === 'time' ? 'at' : 'on'} or later than ${earliestAllowed || 'a field with no value'}`);
+                    }
+                }
+                if (validation.to) {
+                    let latestAllowed = validation.to;
+                    if (/{{[\w.]+(?:\s+[\w.]+)*(?:\s+\d+)?}}/.test(latestAllowed)) {
+                        latestAllowed = Handlebars.compileAST(latestAllowed)(data);
+                    }
+                    if (latestAllowed && value > latestAllowed) {
+                        return (errorMsg ||
+                            `${fieldName} must be ${parameter?.type === 'time' ? 'at' : 'on'} or before ${latestAllowed || 'a field with no value'}`);
+                    }
+                }
+            }
+            // Regex validation
+            if (validation.rules) {
+                const rules = validation.rules;
+                const failedRules = rules.filter((rule) => {
+                    const regex = new RegExp(rule.regex);
+                    return !regex.test(value);
+                });
+                const operator = validation.operator;
+                if (failedRules.length > 0) {
+                    if (operator === 'all') {
+                        const messages = failedRules
+                            .map((rule) => rule.errorMessage || 'Property is not in a valid format')
+                            .join(' and ');
+                        return `${fieldName}: ${messages}`;
+                    }
+                    if (operator === 'any' && failedRules.length < rules.length) {
+                        return true; // passes if at least one rule passed
+                    }
+                    const messages = failedRules
+                        .map((rule) => rule.errorMessage || 'Property is not in a valid format')
+                        .join(' or ');
+                    return `${fieldName}: ${messages}`;
+                }
+            }
+            // Integer check
+            if (parameter?.type === 'integer') {
+                if (value && !Number.isInteger(value)) {
+                    return `${fieldName} must be an integer`;
+                }
+            }
+            // Invalid date check
+            if (value?.invalid && value?.dateText) {
+                return `Invalid Date`;
+            }
+            return true;
+        };
+        register(entry.parameterId || entry.input?.id, validationRules);
+    });
+};
+Handlebars.registerHelper('addDays', function (addend1, addend2) {
+    const dateAddend1 = DateTime.fromISO(addend1);
+    if (dateAddend1.isValid) {
+        return dateAddend1.plus({ days: addend2 }).toISODate();
+    }
+    return undefined;
+});
+Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
+    const dateMinuend = DateTime.fromISO(minuend);
+    if (dateMinuend.isValid) {
+        return dateMinuend.minus({ days: subtrahend }).toISODate();
+    }
+    return undefined;
+});

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldErrors } from 'react-hook-form';
+export type ValidationErrorDisplayProps = {
+    errors: FieldErrors;
+    show: boolean;
+    formId: string;
+    title?: string;
+};
+declare function ValidationErrorDisplay(props: ValidationErrorDisplayProps): React.JSX.Element | null;
+export default ValidationErrorDisplay;

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useResponsive } from '../../../../../theme';
+import { List, ListItem, Typography } from '../../../../core';
+import { Box } from '../../../../layout';
+function ValidationErrorDisplay(props) {
+    const { errors, show, formId, title } = props;
+    const { isSm, isXs } = useResponsive();
+    function extractErrorMessages(errors) {
+        const messages = [];
+        for (const key in errors) {
+            const error = errors[key];
+            if (error?.message) {
+                messages.push(error.message);
+            }
+            else if (error) {
+                for (const nestedKey in error) {
+                    const nestedError = error[nestedKey];
+                    if (nestedError?.message) {
+                        messages.push(nestedError.message);
+                    }
+                }
+            }
+        }
+        return messages;
+    }
+    const errorMessages = extractErrorMessages(errors);
+    return show && errorMessages.length > 0 ? (React.createElement(Box, { id: `validation-error-display-${formId}`, sx: {
+            backgroundColor: '#f8d7da',
+            borderColor: '#f5c6cb',
+            color: '#721c24',
+            border: '1px solid #721c24',
+            padding: '8px 24px',
+            borderRadius: '4px',
+            marginBottom: isSm || isXs ? 2 : 3,
+            marginTop: !title ? (isSm || isXs ? -2 : -3) : undefined,
+        } },
+        React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),
+        React.createElement(List, { sx: {
+                listStyleType: 'disc',
+                paddingLeft: '40px',
+                mb: '8px',
+                fontFamily: 'Arial, Helvetica, sans-serif',
+            } }, errorMessages.map((msg, index) => (React.createElement(ListItem, { key: index, sx: { display: 'list-item', p: 0 } }, msg)))))) : null;
+}
+export default ValidationErrorDisplay;

package/dist/published/components/custom/FormV2/components/types.d.ts

@@ -0,0 +1,8 @@
+export type FieldAddress = {
+    line1?: string;
+    line2?: string;
+    city?: string;
+    county?: string;
+    state?: string;
+    zipCode?: string;
+};

package/dist/published/components/custom/FormV2/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/published/components/custom/FormV2/components/utils.d.ts

@@ -0,0 +1,5 @@
+import { Property } from '@evoke-platform/context';
+import { AutocompleteOption } from '../../../core';
+export declare function getPrefixedUrl(url: string): string;
+export declare const isOptionEqualToValue: (option: AutocompleteOption | string, value: unknown) => boolean;
+export declare function addressProperties(addressProperty: Property): Property[];

package/dist/published/components/custom/FormV2/components/utils.js

@@ -0,0 +1,59 @@
+export function getPrefixedUrl(url) {
+    const wcsMatchers = ['/apps', '/pages', '/widgets'];
+    const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/payments', '/locations'];
+    const signalrMatchers = ['/hubs'];
+    const accessManagementMatchers = ['/users'];
+    const workflowMatchers = ['/workflows'];
+    if (wcsMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/webContent${url}`;
+    if (dataMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/data${url}`;
+    if (signalrMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/signalr${url}`;
+    if (accessManagementMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/accessManagement${url}`;
+    if (workflowMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/workflow${url}`;
+    console.error('Invalid URL');
+    return url;
+}
+export const isOptionEqualToValue = (option, value) => {
+    if (typeof option === 'string') {
+        return option === value;
+    }
+    return option.value === value;
+};
+export function addressProperties(addressProperty) {
+    return [
+        {
+            id: `${addressProperty.id}.line1`,
+            name: `${addressProperty.name} Line 1`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.line2`,
+            name: `${addressProperty.name} Line 2`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.city`,
+            name: `${addressProperty.name} City`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.county`,
+            name: `${addressProperty.name} County`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.state`,
+            name: `${addressProperty.name} State`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.zipCode`,
+            name: `${addressProperty.name} Zip Code`,
+            type: 'string',
+        },
+    ];
+}

package/dist/published/theme/hooks.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Breakpoint } from '@mui/material/styles';
 /**
  * Custom hook for responsive design breakpoints using size terminology.
@@ -107,3 +108,10 @@ export declare const useWidgetSize: (options?: {
     resize?: boolean;
 }) => WidgetSizeInfo;
 export default useWidgetSize;
+export declare function useFormContext(): {
+    fetchedOptions: import("react-hook-form").FieldValues;
+    setFetchedOptions: import("react").Dispatch<import("react").SetStateAction<import("react-hook-form").FieldValues>>;
+    getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;
+    stickyFooter?: boolean | undefined;
+    object?: import("@evoke-platform/context").Obj | undefined;
+};

package/dist/published/theme/hooks.js

@@ -1,6 +1,8 @@
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { useContext } from 'react';
 import useMeasure from 'react-use-measure';
+import { FormContext } from '../components/custom/FormV2/components/FormContext';
 /**
  * Custom hook for responsive design breakpoints using size terminology.
  * Breakpoints based on MUI default theme:
@@ -98,3 +100,10 @@ export const useWidgetSize = (options) => {
     };
 };
 export default useWidgetSize;
+export function useFormContext() {
+    const context = useContext(FormContext);
+    if (!context) {
+        throw new Error('useFormContext must be used within a FormContext.Provider');
+    }
+    return context;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.14",
+    "version": "1.6.0-dev.16",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",