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

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

@@ -0,0 +1,19 @@
+import { ActionType, FormEntry } from '@evoke-platform/context';
+import React from 'react';
+import { FieldErrors, FieldValues, UseFormReturn, UseFormSetValue, UseFormUnregister } from 'react-hook-form';
+type ActionButtonProps = {
+    onSubmit: (data: FieldValues) => void;
+    handleSubmit: UseFormReturn['handleSubmit'];
+    isModal: boolean;
+    submitButtonLabel?: string;
+    actionType?: ActionType;
+    onReset: () => void;
+    errors?: FieldErrors;
+    unregister: UseFormUnregister<FieldValues>;
+    entries: FormEntry[];
+    setValue: UseFormSetValue<FieldValues>;
+    formId?: string;
+    instance?: FieldValues;
+};
+declare function ActionButtons(props: ActionButtonProps): React.JSX.Element;
+export default ActionButtons;

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

@@ -0,0 +1,106 @@
+import { isEmpty, omit } from 'lodash';
+import React, { useContext, useState } from 'react';
+import { useResponsive } from '../../../../theme';
+import { Button, LoadingButton } from '../../../core';
+import { Box } from '../../../layout';
+import { FormContext } from './FormContext';
+import { entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, scrollIntoViewWithOffset, } from './utils';
+function ActionButtons(props) {
+    const { onSubmit, submitButtonLabel, actionType, handleSubmit, onReset, unregister, errors, isModal, entries, setValue, formId, instance, } = props;
+    const { isXs } = useResponsive();
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const { getValues } = useContext(FormContext);
+    const unregisterHiddenFields = (entriesToCheck) => {
+        entriesToCheck.forEach((entry) => {
+            if (entry.type === 'sections' || entry.type === 'columns') {
+                const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+                subEntries.forEach((subEntry) => {
+                    if (subEntry.entries) {
+                        unregisterHiddenFields(subEntry.entries);
+                    }
+                });
+            }
+            if (!entryIsVisible(entry, getValues(), instance)) {
+                if (entry.type === 'sections' || entry.type === 'columns') {
+                    const fieldsToUnregister = getNestedParameterIds(entry);
+                    fieldsToUnregister.forEach(processFieldUnregister);
+                }
+                else {
+                    const fieldId = getEntryId(entry);
+                    if (fieldId)
+                        processFieldUnregister(fieldId);
+                }
+            }
+        });
+    };
+    const processFieldUnregister = (fieldId) => {
+        if (isAddressProperty(fieldId)) {
+            // Unregister entire 'address' to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
+            let addressValues = getValues('address');
+            addressValues = omit(addressValues, fieldId.split('.')[1]);
+            unregister('address');
+            setValue('address', addressValues);
+        }
+        else {
+            unregister(fieldId);
+        }
+    };
+    async function showErrorsOrSubmit() {
+        setIsSubmitLoading(true);
+        unregisterHiddenFields(entries ?? []);
+        try {
+            await handleSubmit((data) => onSubmit(actionType === 'delete' ? {} : data))();
+        }
+        finally {
+            setIsSubmitLoading(false);
+        }
+        if (!isEmpty(errors)) {
+            setTimeout(() => {
+                const errorElement = document.getElementById(`validation-error-display-${formId}`);
+                let modal = errorElement?.closest('.MuiPaper-root');
+                const hasCloseIcon = modal?.querySelector('svg[data-testid="CloseIcon"]');
+                modal = hasCloseIcon ? document.querySelector('.MuiDialogContent-root') : modal;
+                if (errorElement) {
+                    scrollIntoViewWithOffset(errorElement, 170, modal);
+                }
+            }, 0);
+        }
+    }
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flexWrap: 'wrap-reverse',
+            width: '100%',
+        } },
+        React.createElement(Button, { key: "cancel", variant: "outlined", sx: {
+                margin: '5px',
+                marginX: isXs ? '0px' : undefined,
+                color: 'black',
+                border: '1px solid rgb(206, 212, 218)',
+                width: isXs ? '100%' : 'auto',
+                '&:hover': {
+                    backgroundColor: '#f2f4f7',
+                    border: '1px solid rgb(206, 212, 218)',
+                },
+            }, onClick: () => onReset() }, isModal ? 'Cancel' : 'Discard Changes'),
+        React.createElement(LoadingButton, { key: "submit", variant: "contained", sx: {
+                lineHeight: '2.75',
+                margin: '5px 0 5px 5px',
+                marginX: isXs ? '0px' : undefined,
+                padding: '0 23px',
+                backgroundColor: actionType === 'delete' ? '#A12723' : 'primary',
+                borderRadius: '8px',
+                boxShadow: 'none',
+                whiteSpace: 'nowrap',
+                width: isXs ? '100%' : 'auto',
+                '& .MuiCircularProgress-root': {
+                    color: 'white',
+                },
+                '&:hover': {
+                    backgroundColor: actionType === 'delete' ? ' #8C2421' : '#014E7B',
+                },
+            }, onClick: () => {
+                showErrorsOrSubmit();
+            }, loading: isSubmitLoading }, submitButtonLabel || 'Submit')));
+}
+export default ActionButtons;

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

@@ -1,6 +1,19 @@
 import { isArray } from 'lodash';
 import { DateTime } from 'luxon';
 import Handlebars from 'no-eval-handlebars';
+function isNumericValidation(validation) {
+    return 'minimum' in validation || 'maximum' in validation;
+}
+function isCalendarValidation(validation) {
+    return 'to' in validation || 'from' in validation;
+}
+function isStringValidation(validation) {
+    return 'operator' in validation;
+}
+function isDocumentValidation(validation) {
+    const documentValidationKeys = ['minDocuments', 'maxDocuments', 'errorMessage'];
+    return !validation || Object.keys(validation).every((key) => documentValidationKeys.includes(key));
+}
 export const handleValidation = (entries, register, formValues, parameters, instance) => {
     entries?.forEach((entry) => {
         if (entry.type === 'sections' || entry.type === 'columns') {
@@ -51,13 +64,13 @@ export const handleValidation = (entries, register, formValues, parameters, inst
             };
         }
         // Min/max number fields
-        if (typeof validation.maximum === 'number') {
+        if (isNumericValidation(validation) && validation.maximum) {
             validationRules.max = {
                 value: validation.maximum,
                 message: errorMsg || `${fieldName} must have a value under ${validation.maximum}`,
             };
         }
-        if (typeof validation.minimum === 'number') {
+        if (isNumericValidation(validation) && validation.minimum) {
             validationRules.min = {
                 value: validation.minimum,
                 message: errorMsg || `${fieldName} must have a value over ${validation.minimum}`,
@@ -67,13 +80,12 @@ export const handleValidation = (entries, register, formValues, parameters, inst
             if (!value)
                 return true;
             // Document validation
-            if (validation.maxDocuments || validation.minDocuments) {
+            if (isDocumentValidation(validation)) {
                 const amountOfDocuments = isArray(value) ? value.length : 0;
-                const min = validation.minDocuments;
-                const max = validation.maxDocuments;
+                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' : ''}`);
+                    return errorMsg || `Please select between ${min} and ${max} document${max > 1 ? 's' : ''}`;
                 }
                 else if (min && amountOfDocuments < min) {
                     return errorMsg || `Please select at least ${min} document${min > 1 ? 's' : ''}`;
@@ -83,10 +95,10 @@ export const handleValidation = (entries, register, formValues, parameters, inst
                 }
             }
             // Date and Time validation
-            if (validation.from || validation.to) {
+            if (isCalendarValidation(validation)) {
                 const data = {
                     __today__: DateTime.now().toISODate(),
-                    input: { ...instance, ...formValues },
+                    input: formValues,
                 };
                 if (validation.from) {
                     let earliestAllowed = validation.from;
@@ -110,7 +122,7 @@ export const handleValidation = (entries, register, formValues, parameters, inst
                 }
             }
             // Regex validation
-            if (validation.rules) {
+            if (isStringValidation(validation) && validation.rules) {
                 const rules = validation.rules;
                 const failedRules = rules.filter((rule) => {
                     const regex = new RegExp(rule.regex);

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

@@ -1,5 +1,22 @@
-import { Property } from '@evoke-platform/context';
+import { Columns, FormEntry, Property, Sections } from '@evoke-platform/context';
+import { LocalDateTime } from '@js-joda/core';
+import { FieldValues } from 'react-hook-form';
 import { AutocompleteOption } from '../../../core';
+export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
+export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
+export declare function isAddressProperty(key: string): boolean;
+/**
+ * Determine if a form entry is visible or not.
+ */
+export declare const entryIsVisible: (entry: FormEntry, formValues: FieldValues, instance?: FieldValues) => boolean;
+/**
+ * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
+ *
+ * @param {Sections | Columns} entry - The entry object, which can be of type Sections or Columns.
+ * @returns {string[]} - An array of parameter IDs found within the entry.
+ */
+export declare const getNestedParameterIds: (entry: Sections | Columns) => string[];
+export declare const getEntryId: (entry: FormEntry) => string | undefined;
 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

@@ -1,3 +1,116 @@
+import { LocalDateTime } from '@js-joda/core';
+import jsonLogic from 'json-logic-js';
+import { get, isArray, isObject } from 'lodash';
+export const scrollIntoViewWithOffset = (el, offset, container) => {
+    const elementRect = el.getBoundingClientRect();
+    const containerRect = container ? container.getBoundingClientRect() : document.body.getBoundingClientRect();
+    const topPosition = elementRect.top - containerRect.top + (container?.scrollTop || 0) - offset;
+    if (container) {
+        container.scrollTo({
+            behavior: 'smooth',
+            top: topPosition,
+        });
+    }
+    else {
+        window.scrollTo({
+            behavior: 'smooth',
+            top: topPosition,
+        });
+    }
+};
+export const normalizeDateTime = (dateTime) => new Date(dateTime.toString()).toISOString();
+const evaluateCondition = (condition, formValues, instance) => {
+    if (typeof condition !== 'object') {
+        console.error('Invalid condition format: ', condition);
+        return true;
+    }
+    if (isArray(condition)) {
+        const firstCondition = condition[0];
+        const { property, value, operator } = firstCondition;
+        let fieldValue = firstCondition.isInstanceProperty ? get(instance, property) : get(formValues, property);
+        if (typeof fieldValue === 'object' && fieldValue !== null) {
+            if (fieldValue instanceof LocalDateTime) {
+                fieldValue = normalizeDateTime(fieldValue);
+            }
+            else {
+                fieldValue = Object.values(fieldValue).includes(value)
+                    ? value
+                    : Object.values(fieldValue).find((val) => val !== undefined && val !== null);
+            }
+        }
+        switch (operator) {
+            case 'ne':
+                return fieldValue != value;
+            case 'eq':
+                return fieldValue == value;
+            default:
+                console.error(`Unsupported operator: ${operator}`);
+                return false;
+        }
+    }
+    // Handling custom JSON logic
+    else {
+        const data = {
+            data: formValues,
+            instance: instance,
+        };
+        const result = jsonLogic.apply(condition, data);
+        return result === true;
+    }
+};
+export function isAddressProperty(key) {
+    return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
+}
+/**
+ * Determine if a form entry is visible or not.
+ */
+export const entryIsVisible = (entry, formValues, instance) => {
+    const display = 'display' in entry ? entry.display : undefined;
+    const { visibility } = display ?? ('visibility' in entry ? entry : {});
+    if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
+        // visibility is a simple condition
+        const { conditions } = visibility;
+        return evaluateCondition(conditions, formValues, instance);
+    }
+    else if (visibility) {
+        // visibility is a JSONlogic condition
+        return evaluateCondition(visibility, formValues, instance);
+    }
+    return true;
+};
+/**
+ * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
+ *
+ * @param {Sections | Columns} entry - The entry object, which can be of type Sections or Columns.
+ * @returns {string[]} - An array of parameter IDs found within the entry.
+ */
+export const getNestedParameterIds = (entry) => {
+    const parameterIds = [];
+    const entries = entry.type === 'columns'
+        ? entry.columns.flatMap((column) => column.entries ?? [])
+        : entry.sections.flatMap((section) => section.entries ?? []);
+    for (const subEntry of entries) {
+        if (subEntry.type === 'columns' || subEntry.type === 'sections') {
+            parameterIds.push(...getNestedParameterIds(subEntry));
+        }
+        else {
+            const paramId = getEntryId(subEntry);
+            if (paramId && paramId !== 'collection') {
+                parameterIds.push(paramId);
+            }
+        }
+    }
+    return parameterIds;
+};
+export const getEntryId = (entry) => {
+    return entry.type === 'input'
+        ? entry.parameterId
+        : entry.type === 'readonlyField'
+            ? entry.propertyId
+            : entry.type === 'inputField'
+                ? entry.input.id
+                : undefined;
+};
 export function getPrefixedUrl(url) {
     const wcsMatchers = ['/apps', '/pages', '/widgets'];
     const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/payments', '/locations'];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.16",
+    "version": "1.6.0-dev.18",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -54,6 +54,7 @@
         "@testing-library/user-event": "^14.5.2",
         "@types/flat": "^5.0.5",
         "@types/jest": "^28.1.4",
+        "@types/json-logic-js": "^2.0.8",
         "@types/luxon": "^3.4.2",
         "@types/nanoid-dictionary": "^4.2.3",
         "@types/node": "^18.0.0",