[JSON Logic] Part 7: Add conditional logic checking

src/calculateConditionalProperties.js

@@ -4,6 +4,7 @@ import omit from 'lodash/omit';
 import { extractParametersFromNode } from './helpers';
 import { supportedTypes } from './internals/fields';
 import { getFieldDescription, pickXKey } from './internals/helpers';
+import { calculateComputedAttributes } from './jsonLogic';
 import { buildYupSchema } from './yupSchema';
 /**
  * @typedef {import('./createHeadlessForm').FieldParameters} FieldParameters
@@ -64,19 +65,29 @@ function rebuildFieldset(fields, property) {
 }
 
 /**
- * Builds a function that updates the fields properties based on the form values and the
- * dependencies the field has on the current schema.
- * @param {FieldParameters} fieldParams - field parameters
- * @returns {Function}
+ * Builds a function that updates the field properties based on the form values,
+ * schema dependencies, and conditional logic.
+ *
+ * @param {Object} params - Parameters
+ * @param {Object} params.fieldParams - Current field parameters
+ * @param {Object} params.customProperties - Custom field properties from schema
+ * @param {Object} params.logic - JSON-logic
+ * @param {Object} params.config - Form configuration
+ *
+ * @returns {Function} A function that calculates conditional properties
  */
-export function calculateConditionalProperties(fieldParams, customProperties) {
+export function calculateConditionalProperties({ fieldParams, customProperties, logic, config }) {
   /**
    * Runs dynamic property calculation on a field based on a conditional that has been calculated
-   * @param {Boolean} isRequired - if the field is required
-   * @param {Object} conditionBranch - condition branch being applied
-   * @returns {Object} updated field parameters
+   *
+   * @param {Object} params - Parameters
+   * @param {Boolean} params.isRequired - If field is required
+   * @param {Object} params.conditionBranch - Condition branch
+   * @param {Object} params.formValues - Current form values
+   *
+   * @returns {Object} Updated field parameters
    */
-  return (isRequired, conditionBranch) => {
+  return ({ isRequired, conditionBranch, formValues }) => {
     // Check if the current field is conditionally declared in the schema
 
     const conditionalProperty = conditionBranch?.properties?.[fieldParams.name];
@@ -98,17 +109,37 @@ export function calculateConditionalProperties(fieldParams, customProperties) {
         newFieldParams.fields = fieldSetFields;
       }
 
+      const { computedAttributes, ...restNewFieldParams } = newFieldParams;
+      const calculatedComputedAttributes = computedAttributes
+        ? calculateComputedAttributes(newFieldParams, config)({ logic, formValues })
+        : {};
+
+      const jsonLogicValidations = [
+        ...(fieldParams.jsonLogicValidations ?? []),
+        ...(restNewFieldParams.jsonLogicValidations ?? []),
+      ];
+
       const base = {
         isVisible: true,
         required: isRequired,
         ...(presentation?.inputType && { type: presentation.inputType }),
-        schema: buildYupSchema({
-          ...fieldParams,
-          ...newFieldParams,
-          // If there are inner fields (case of fieldset) they need to be updated based on the condition
-          fields: fieldSetFields,
-          required: isRequired,
-        }),
+        ...calculatedComputedAttributes,
+        ...(calculatedComputedAttributes.value
+          ? { value: calculatedComputedAttributes.value }
+          : { value: undefined }),
+        schema: buildYupSchema(
+          {
+            ...fieldParams,
+            ...restNewFieldParams,
+            ...calculatedComputedAttributes,
+            jsonLogicValidations,
+            // If there are inner fields (case of fieldset) they need to be updated based on the condition
+            fields: fieldSetFields,
+            required: isRequired,
+          },
+          config,
+          logic
+        ),
       };
 
       return omit(merge(base, presentation, newFieldParams), ['inputType']);

src/checkIfConditionMatches.js

@@ -7,8 +7,8 @@ import { hasProperty } from './utils';
  * @param {Object} formValues - form state
  * @returns {Boolean}
  */
-export function checkIfConditionMatches(node, formValues, formFields) {
-  return Object.keys(node.if.properties).every((name) => {
+export function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
+  return Object.keys(node.if.properties ?? {}).every((name) => {
     const currentProperty = node.if.properties[name];
     const value = formValues[name];
     const hasEmptyValue =
@@ -47,10 +47,11 @@ export function checkIfConditionMatches(node, formValues, formFields) {
     }
 
     if (currentProperty.properties) {
-      return checkIfConditionMatches(
+      return checkIfConditionMatchesProperties(
         { if: currentProperty },
         formValues[name],
-        getField(name, formFields).fields
+        getField(name, formFields).fields,
+        logic
       );
     }
 
@@ -68,3 +69,23 @@ export function checkIfConditionMatches(node, formValues, formFields) {
     );
   });
 }
+
+export function checkIfMatchesValidationsAndComputedValues(node, formValues, logic, parentID) {
+  const validationsMatch = Object.entries(node.if.validations ?? {}).every(([name, property]) => {
+    const currentValue = logic.getScope(parentID).applyValidationRuleInCondition(name, formValues);
+    if (Object.hasOwn(property, 'const') && currentValue === property.const) return true;
+    return false;
+  });
+
+  const computedValuesMatch = Object.entries(node.if.computedValues ?? {}).every(
+    ([name, property]) => {
+      const currentValue = logic
+        .getScope(parentID)
+        .applyComputedValueRuleInCondition(name, formValues);
+      if (Object.hasOwn(property, 'const') && currentValue === property.const) return true;
+      return false;
+    }
+  );
+
+  return computedValuesMatch && validationsMatch;
+}

src/createHeadlessForm.js

@@ -100,17 +100,22 @@ function removeInvalidAttributes(fields) {
  *
  * @returns {FieldParameters}
  */
-function buildFieldParameters(name, fieldProperties, required = [], config = {}) {
+function buildFieldParameters(name, fieldProperties, required = [], config = {}, logic) {
   const { position } = pickXKey(fieldProperties, 'presentation') ?? {};
   let fields;
 
   const inputType = getInputType(fieldProperties, config.strictInputType, name);
 
   if (inputType === supportedTypes.FIELDSET) {
     // eslint-disable-next-line no-use-before-define
-    fields = getFieldsFromJSONSchema(fieldProperties, {
-      customProperties: get(config, `customProperties.${name}`, {}),
-    });
+    fields = getFieldsFromJSONSchema(
+      fieldProperties,
+      {
+        customProperties: get(config, `customProperties.${name}`, {}),
+        parentID: name,
+      },
+      logic
+    );
   }
 
   const result = {
@@ -235,7 +240,8 @@ function buildField(fieldParams, config, scopedJsonSchema, logic) {
 
   const yupSchema = buildYupSchema(fieldParams, config, logic);
   const calculateConditionalFieldsClosure =
-    fieldParams.isDynamic && calculateConditionalProperties(fieldParams, customProperties);
+    fieldParams.isDynamic &&
+    calculateConditionalProperties({ fieldParams, customProperties, logic, config });
 
   const calculateCustomValidationPropertiesClosure = calculateCustomValidationProperties(
     fieldParams,

src/helpers.js

@@ -5,9 +5,10 @@ import omitBy from 'lodash/omitBy';
 import set from 'lodash/set';
 import { lazy } from 'yup';
 
-import { checkIfConditionMatches } from './checkIfConditionMatches';
+import { checkIfConditionMatchesProperties } from './checkIfConditionMatches';
 import { supportedTypes, getInputType } from './internals/fields';
 import { pickXKey } from './internals/helpers';
+import { processJSONLogicNode } from './jsonLogic';
 import { containsHTML, hasProperty, wrapWithSpan } from './utils';
 import { buildCompleteYupSchema, buildYupSchema } from './yupSchema';
 
@@ -240,7 +241,11 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
 
   // If field has a calculateConditionalProperties closure, run it and update the field properties
   if (field.calculateConditionalProperties) {
-    const newFieldValues = field.calculateConditionalProperties(fieldIsRequired, node);
+    const newFieldValues = field.calculateConditionalProperties({
+      isRequired: fieldIsRequired,
+      conditionBranch: node,
+      formValues,
+    });
     updateValues(newFieldValues);
   }
 
@@ -294,7 +299,7 @@ export function processNode({
   });
 
   if (node.if) {
-    const matchesCondition = checkIfConditionMatches(node, formValues, formFields, logic);
+    const matchesCondition = checkIfConditionMatchesProperties(node, formValues, formFields, logic);
     // BUG HERE (unreleated) - what if it matches but doesn't has a then,
     // it should do nothing, but instead it jumps to node.else when it shouldn't.
     if (matchesCondition && node.then) {
@@ -368,6 +373,18 @@ export function processNode({
     });
   }
 
+  if (node['x-jsf-logic']) {
+    const { required: requiredFromLogic } = processJSONLogicNode({
+      node: node['x-jsf-logic'],
+      formValues,
+      formFields,
+      accRequired: requiredFields,
+      parentID,
+      logic,
+    });
+    requiredFromLogic.forEach((field) => requiredFields.add(field));
+  }
+
   return {
     required: requiredFields,
   };
@@ -465,7 +482,7 @@ export function extractParametersFromNode(schemaNode) {
 
   const presentation = pickXKey(schemaNode, 'presentation') ?? {};
   const errorMessage = pickXKey(schemaNode, 'errorMessage') ?? {};
-  const requiredValidations = schemaNode['x-jsf-logic-validations'];
+  const jsonLogicValidations = schemaNode['x-jsf-logic-validations'];
   const computedAttributes = schemaNode['x-jsf-logic-computedAttrs'];
 
   // This is when a forced value is computed.
@@ -516,7 +533,7 @@ export function extractParametersFromNode(schemaNode) {
 
       // Handle [name].presentation
       ...presentation,
-      requiredValidations,
+      jsonLogicValidations,
       computedAttributes: decoratedComputedAttributes,
       description: containsHTML(description)
         ? wrapWithSpan(description, {

src/jsonLogic.js

@@ -1,5 +1,10 @@
 import jsonLogic from 'json-logic-js';
 
+import {
+  checkIfConditionMatchesProperties,
+  checkIfMatchesValidationsAndComputedValues,
+} from './checkIfConditionMatches';
+import { processNode } from './helpers';
 import { buildYupSchema } from './yupSchema';
 
 /**
@@ -90,7 +95,10 @@ function createValidationsScope(schema) {
   });
 
   function validate(rule, values) {
-    return jsonLogic.apply(rule, replaceUndefinedValuesWithNulls(values));
+    return jsonLogic.apply(
+      rule,
+      replaceUndefinedValuesWithNulls({ ...sampleEmptyObject, ...values })
+    );
   }
 
   return {
@@ -126,7 +134,7 @@ function createValidationsScope(schema) {
  */
 function replaceUndefinedValuesWithNulls(values = {}) {
   return Object.entries(values).reduce((prev, [key, value]) => {
-    return { ...prev, [key]: value === undefined ? null : value };
+    return { ...prev, [key]: value === undefined || value === null ? NaN : value };
   }, {});
 }
 
@@ -428,3 +436,59 @@ function removeIndicesFromPath(path) {
   const intermediatePath = path.replace(regexToGetIndices, '.');
   return intermediatePath.replace(/\.\d+$/, '');
 }
+
+export function processJSONLogicNode({
+  node,
+  formFields,
+  formValues,
+  accRequired,
+  parentID,
+  logic,
+}) {
+  const requiredFields = new Set(accRequired);
+
+  if (node.allOf) {
+    node.allOf
+      .map((allOfNode) =>
+        processJSONLogicNode({ node: allOfNode, formValues, formFields, logic, parentID })
+      )
+      .forEach(({ required: allOfItemRequired }) => {
+        allOfItemRequired.forEach(requiredFields.add, requiredFields);
+      });
+  }
+
+  if (node.if) {
+    const matchesPropertyCondition = checkIfConditionMatchesProperties(
+      node,
+      formValues,
+      formFields,
+      logic
+    );
+    const matchesValidationsAndComputedValues =
+      matchesPropertyCondition &&
+      checkIfMatchesValidationsAndComputedValues(node, formValues, logic, parentID);
+
+    const isConditionMatch = matchesPropertyCondition && matchesValidationsAndComputedValues;
+
+    let nextNode;
+    if (isConditionMatch && node.then) {
+      nextNode = node.then;
+    }
+    if (!isConditionMatch && node.else) {
+      nextNode = node.else;
+    }
+    if (nextNode) {
+      const { required: branchRequired } = processNode({
+        node: nextNode,
+        formValues,
+        formFields,
+        accRequired,
+        logic,
+        parentID,
+      });
+      branchRequired.forEach((field) => requiredFields.add(field));
+    }
+  }
+
+  return { required: requiredFields };
+}

src/tests/checkIfConditionMatches.test.js

@@ -1,12 +1,12 @@
-import { checkIfConditionMatches } from '../checkIfConditionMatches';
+import { checkIfConditionMatchesProperties } from '../checkIfConditionMatches';
 
 it('Empty if is always going to be true', () => {
-  expect(checkIfConditionMatches({ if: { properties: {} } })).toBe(true);
+  expect(checkIfConditionMatchesProperties({ if: { properties: {} } })).toBe(true);
 });
 
 it('Basic if check passes with correct value', () => {
   expect(
-    checkIfConditionMatches(
+    checkIfConditionMatchesProperties(
       { if: { properties: { a: { const: 'hello' } } } },
       {
         a: 'hello',
@@ -17,7 +17,7 @@ it('Basic if check passes with correct value', () => {
 
 it('Basic if check fails with incorrect value', () => {
   expect(
-    checkIfConditionMatches(
+    checkIfConditionMatchesProperties(
       { if: { properties: { a: { const: 'hello' } } } },
       {
         a: 'goodbye',
@@ -28,7 +28,7 @@ it('Basic if check fails with incorrect value', () => {
 
 it('Nested properties check passes with correct value', () => {
   expect(
-    checkIfConditionMatches(
+    checkIfConditionMatchesProperties(
       { if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } } },
       {
         parent: { child: 'hello from child' },
@@ -40,7 +40,7 @@ it('Nested properties check passes with correct value', () => {
 
 it('Nested properties check passes with correct value', () => {
   expect(
-    checkIfConditionMatches(
+    checkIfConditionMatchesProperties(
       { if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } } },
       {
         parent: { child: 'goodbye from child' },