@remoteoss/json-schema-form 0.12.1-dev.20251008013953 → 0.12.2-beta.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+#### 0.12.2-beta.0 (2025-10-23)
+
+##### New Features
+
+* **v0:**  Support nested fieldset conditionals ([#156](https://github.com/remoteoss/json-schema-form/pull/156)) ([877e82e1](https://github.com/remoteoss/json-schema-form/commit/877e82e148d1ff6964ba634108f8ca821c040565))
+
+#### 0.12.1-beta.0 (2025-10-09)
+
+##### Bug Fixes
+
+* **checkbox:**  Support optional boolean type for v0 ([#236](https://github.com/remoteoss/json-schema-form/pull/236)) ([76e8927f](https://github.com/remoteoss/json-schema-form/commit/76e8927fc2f4615620fe34eef303b2f9c8c81e6e))
+
 #### 0.12.0-beta.0 (2025-06-25)
 
 ##### New Features

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.12.1-dev.20251008013953
- Generated: Wed, 08 Oct 2025 01:40:15 GMT
+ NPM Package: @remoteoss/json-schema-form@0.12.2-beta.0
+ Generated: Thu, 23 Oct 2025 14:03:06 GMT
 
  MIT License
 
@@ -737,9 +737,7 @@ function buildYupSchema(field, config, logic) {
     const fieldSetShape = {};
     innerFields.forEach((fieldSetfield) => {
       if (fieldSetfield.fields) {
-        fieldSetShape[fieldSetfield.name] = (0, import_yup.object)().shape(
-          buildFieldSetSchema(fieldSetfield.fields)
-        );
+        fieldSetShape[fieldSetfield.name] = (0, import_yup.object)().shape(buildFieldSetSchema(fieldSetfield.fields)).nullable();
       } else {
         fieldSetShape[fieldSetfield.name] = buildYupSchema(
           {
@@ -1308,7 +1306,8 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
     const { rootFieldAttrs, newAttributes } = field.calculateConditionalProperties({
       isRequired: fieldIsRequired,
       conditionBranch: node,
-      formValues
+      formValues,
+      currentField: field
     });
     updateAttributes(newAttributes);
     removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
@@ -1331,9 +1330,19 @@ function processNode({
   logic
 }) {
   const requiredFields = new Set(accRequired);
-  Object.keys(node.properties ?? []).forEach((fieldName) => {
+  Object.entries(node.properties ?? []).forEach(([fieldName, nestedNode]) => {
     const field = getField(fieldName, formFields);
     updateField(field, requiredFields, node, formValues, logic, { parentID });
+    const isFieldset = field?.inputType === supportedTypes.FIELDSET;
+    if (isFieldset) {
+      processNode({
+        node: nestedNode,
+        formValues: formValues[fieldName] || {},
+        formFields: field.fields,
+        parentID,
+        logic
+      });
+    }
   });
   node.required?.forEach((fieldName) => {
     requiredFields.add(fieldName);
@@ -1391,20 +1400,6 @@ function processNode({
       allOfItemRequired.forEach(requiredFields.add, requiredFields);
     });
   }
-  if (node.properties) {
-    Object.entries(node.properties).forEach(([name, nestedNode]) => {
-      const inputType = getInputType(nestedNode);
-      if (inputType === supportedTypes.FIELDSET) {
-        processNode({
-          node: nestedNode,
-          formValues: formValues[name] || {},
-          formFields: getField(name, formFields).fields,
-          parentID: name,
-          logic
-        });
-      }
-    });
-  }
   if (node["x-jsf-logic"]) {
     const { required: requiredFromLogic } = processJSONLogicNode({
       node: node["x-jsf-logic"],
@@ -1596,35 +1591,42 @@ function isFieldRequired(node, field) {
     node?.required?.includes(field.name)
   );
 }
-function rebuildFieldset(fields, property) {
+function rebuildFieldset(fields, currentFields, property) {
   if (property?.properties) {
-    return fields.map((field) => {
+    return fields.map((field, index) => {
       const propertyConditionals = property.properties[field.name];
+      const isVisible = currentFields[index].isVisible;
       if (!propertyConditionals) {
-        return field;
+        return {
+          ...field,
+          isVisible
+        };
       }
       const newFieldParams = extractParametersFromNode(propertyConditionals);
       if (field.fields) {
         return {
           ...field,
           ...newFieldParams,
-          fields: rebuildFieldset(field.fields, propertyConditionals)
+          isVisible,
+          fields: rebuildFieldset(field.fields, currentFields[index].fields, propertyConditionals)
         };
       }
       return {
         ...field,
         ...newFieldParams,
+        isVisible,
         required: isFieldRequired(property, field)
       };
     });
   }
-  return fields.map((field) => ({
+  return fields.map((field, index) => ({
     ...field,
+    isVisible: currentFields[index].isVisible,
     required: isFieldRequired(property, field)
   }));
 }
 function calculateConditionalProperties({ fieldParams, customProperties, logic, config }) {
-  return ({ isRequired, conditionBranch, formValues }) => {
+  return ({ isRequired, conditionBranch, formValues, currentField }) => {
     const conditionalProperty = conditionBranch?.properties?.[fieldParams.name];
     if (conditionalProperty) {
       const presentation = pickXKey(conditionalProperty, "presentation") ?? {};
@@ -1635,7 +1637,11 @@ function calculateConditionalProperties({ fieldParams, customProperties, logic,
       });
       let fieldSetFields;
       if (fieldParams.inputType === supportedTypes.FIELDSET) {
-        fieldSetFields = rebuildFieldset(fieldParams.fields, conditionalProperty);
+        fieldSetFields = rebuildFieldset(
+          fieldParams.fields,
+          currentField.fields,
+          conditionalProperty
+        );
         newFieldParams.fields = fieldSetFields;
       }
       const { computedAttributes, ...restNewFieldParams } = newFieldParams;

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.12.1-dev.20251008013953
- Generated: Wed, 08 Oct 2025 01:40:15 GMT
+ NPM Package: @remoteoss/json-schema-form@0.12.2-beta.0
+ Generated: Thu, 23 Oct 2025 14:03:06 GMT
 
  MIT License
 
@@ -699,9 +699,7 @@ function buildYupSchema(field, config, logic) {
     const fieldSetShape = {};
     innerFields.forEach((fieldSetfield) => {
       if (fieldSetfield.fields) {
-        fieldSetShape[fieldSetfield.name] = object().shape(
-          buildFieldSetSchema(fieldSetfield.fields)
-        );
+        fieldSetShape[fieldSetfield.name] = object().shape(buildFieldSetSchema(fieldSetfield.fields)).nullable();
       } else {
         fieldSetShape[fieldSetfield.name] = buildYupSchema(
           {
@@ -1270,7 +1268,8 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
     const { rootFieldAttrs, newAttributes } = field.calculateConditionalProperties({
       isRequired: fieldIsRequired,
       conditionBranch: node,
-      formValues
+      formValues,
+      currentField: field
     });
     updateAttributes(newAttributes);
     removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
@@ -1293,9 +1292,19 @@ function processNode({
   logic
 }) {
   const requiredFields = new Set(accRequired);
-  Object.keys(node.properties ?? []).forEach((fieldName) => {
+  Object.entries(node.properties ?? []).forEach(([fieldName, nestedNode]) => {
     const field = getField(fieldName, formFields);
     updateField(field, requiredFields, node, formValues, logic, { parentID });
+    const isFieldset = field?.inputType === supportedTypes.FIELDSET;
+    if (isFieldset) {
+      processNode({
+        node: nestedNode,
+        formValues: formValues[fieldName] || {},
+        formFields: field.fields,
+        parentID,
+        logic
+      });
+    }
   });
   node.required?.forEach((fieldName) => {
     requiredFields.add(fieldName);
@@ -1353,20 +1362,6 @@ function processNode({
       allOfItemRequired.forEach(requiredFields.add, requiredFields);
     });
   }
-  if (node.properties) {
-    Object.entries(node.properties).forEach(([name, nestedNode]) => {
-      const inputType = getInputType(nestedNode);
-      if (inputType === supportedTypes.FIELDSET) {
-        processNode({
-          node: nestedNode,
-          formValues: formValues[name] || {},
-          formFields: getField(name, formFields).fields,
-          parentID: name,
-          logic
-        });
-      }
-    });
-  }
   if (node["x-jsf-logic"]) {
     const { required: requiredFromLogic } = processJSONLogicNode({
       node: node["x-jsf-logic"],
@@ -1558,35 +1553,42 @@ function isFieldRequired(node, field) {
     node?.required?.includes(field.name)
   );
 }
-function rebuildFieldset(fields, property) {
+function rebuildFieldset(fields, currentFields, property) {
   if (property?.properties) {
-    return fields.map((field) => {
+    return fields.map((field, index) => {
       const propertyConditionals = property.properties[field.name];
+      const isVisible = currentFields[index].isVisible;
       if (!propertyConditionals) {
-        return field;
+        return {
+          ...field,
+          isVisible
+        };
       }
       const newFieldParams = extractParametersFromNode(propertyConditionals);
       if (field.fields) {
         return {
           ...field,
           ...newFieldParams,
-          fields: rebuildFieldset(field.fields, propertyConditionals)
+          isVisible,
+          fields: rebuildFieldset(field.fields, currentFields[index].fields, propertyConditionals)
         };
       }
       return {
         ...field,
         ...newFieldParams,
+        isVisible,
         required: isFieldRequired(property, field)
       };
     });
   }
-  return fields.map((field) => ({
+  return fields.map((field, index) => ({
     ...field,
+    isVisible: currentFields[index].isVisible,
     required: isFieldRequired(property, field)
   }));
 }
 function calculateConditionalProperties({ fieldParams, customProperties, logic, config }) {
-  return ({ isRequired, conditionBranch, formValues }) => {
+  return ({ isRequired, conditionBranch, formValues, currentField }) => {
     const conditionalProperty = conditionBranch?.properties?.[fieldParams.name];
     if (conditionalProperty) {
       const presentation = pickXKey(conditionalProperty, "presentation") ?? {};
@@ -1597,7 +1599,11 @@ function calculateConditionalProperties({ fieldParams, customProperties, logic,
       });
       let fieldSetFields;
       if (fieldParams.inputType === supportedTypes.FIELDSET) {
-        fieldSetFields = rebuildFieldset(fieldParams.fields, conditionalProperty);
+        fieldSetFields = rebuildFieldset(
+          fieldParams.fields,
+          currentField.fields,
+          conditionalProperty
+        );
         newFieldParams.fields = fieldSetFields;
       }
       const { computedAttributes, ...restNewFieldParams } = newFieldParams;

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.12.1-dev.20251008013953
- Generated: Wed, 08 Oct 2025 01:40:15 GMT
+ NPM Package: @remoteoss/json-schema-form@0.12.2-beta.0
+ Generated: Thu, 23 Oct 2025 14:03:06 GMT
 
  MIT License
 
@@ -12215,9 +12215,7 @@ function buildYupSchema(field, config, logic) {
     const fieldSetShape = {};
     innerFields.forEach((fieldSetfield) => {
       if (fieldSetfield.fields) {
-        fieldSetShape[fieldSetfield.name] = ObjectSchema().shape(
-          buildFieldSetSchema(fieldSetfield.fields)
-        );
+        fieldSetShape[fieldSetfield.name] = ObjectSchema().shape(buildFieldSetSchema(fieldSetfield.fields)).nullable();
       } else {
         fieldSetShape[fieldSetfield.name] = buildYupSchema(
           {
@@ -12786,7 +12784,8 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
     const { rootFieldAttrs, newAttributes } = field.calculateConditionalProperties({
       isRequired: fieldIsRequired,
       conditionBranch: node,
-      formValues
+      formValues,
+      currentField: field
     });
     updateAttributes(newAttributes);
     removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
@@ -12809,9 +12808,19 @@ function processNode({
   logic
 }) {
   const requiredFields = new Set(accRequired);
-  Object.keys(node.properties ?? []).forEach((fieldName) => {
+  Object.entries(node.properties ?? []).forEach(([fieldName, nestedNode]) => {
     const field = getField(fieldName, formFields);
     updateField(field, requiredFields, node, formValues, logic, { parentID });
+    const isFieldset = field?.inputType === supportedTypes.FIELDSET;
+    if (isFieldset) {
+      processNode({
+        node: nestedNode,
+        formValues: formValues[fieldName] || {},
+        formFields: field.fields,
+        parentID,
+        logic
+      });
+    }
   });
   node.required?.forEach((fieldName) => {
     requiredFields.add(fieldName);
@@ -12869,20 +12878,6 @@ function processNode({
       allOfItemRequired.forEach(requiredFields.add, requiredFields);
     });
   }
-  if (node.properties) {
-    Object.entries(node.properties).forEach(([name, nestedNode]) => {
-      const inputType = getInputType(nestedNode);
-      if (inputType === supportedTypes.FIELDSET) {
-        processNode({
-          node: nestedNode,
-          formValues: formValues[name] || {},
-          formFields: getField(name, formFields).fields,
-          parentID: name,
-          logic
-        });
-      }
-    });
-  }
   if (node["x-jsf-logic"]) {
     const { required: requiredFromLogic } = processJSONLogicNode({
       node: node["x-jsf-logic"],
@@ -13074,35 +13069,42 @@ function isFieldRequired(node, field) {
     node?.required?.includes(field.name)
   );
 }
-function rebuildFieldset(fields, property2) {
+function rebuildFieldset(fields, currentFields, property2) {
   if (property2?.properties) {
-    return fields.map((field) => {
+    return fields.map((field, index) => {
       const propertyConditionals = property2.properties[field.name];
+      const isVisible = currentFields[index].isVisible;
       if (!propertyConditionals) {
-        return field;
+        return {
+          ...field,
+          isVisible
+        };
       }
       const newFieldParams = extractParametersFromNode(propertyConditionals);
       if (field.fields) {
         return {
           ...field,
           ...newFieldParams,
-          fields: rebuildFieldset(field.fields, propertyConditionals)
+          isVisible,
+          fields: rebuildFieldset(field.fields, currentFields[index].fields, propertyConditionals)
         };
       }
       return {
         ...field,
         ...newFieldParams,
+        isVisible,
         required: isFieldRequired(property2, field)
       };
     });
   }
-  return fields.map((field) => ({
+  return fields.map((field, index) => ({
     ...field,
+    isVisible: currentFields[index].isVisible,
     required: isFieldRequired(property2, field)
   }));
 }
 function calculateConditionalProperties({ fieldParams, customProperties, logic, config }) {
-  return ({ isRequired, conditionBranch, formValues }) => {
+  return ({ isRequired, conditionBranch, formValues, currentField }) => {
     const conditionalProperty = conditionBranch?.properties?.[fieldParams.name];
     if (conditionalProperty) {
       const presentation = pickXKey(conditionalProperty, "presentation") ?? {};
@@ -13113,7 +13115,11 @@ function calculateConditionalProperties({ fieldParams, customProperties, logic,
       });
       let fieldSetFields;
       if (fieldParams.inputType === supportedTypes.FIELDSET) {
-        fieldSetFields = rebuildFieldset(fieldParams.fields, conditionalProperty);
+        fieldSetFields = rebuildFieldset(
+          fieldParams.fields,
+          currentField.fields,
+          conditionalProperty
+        );
         newFieldParams.fields = fieldSetFields;
       }
       const { computedAttributes, ...restNewFieldParams } = newFieldParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.12.1-dev.20251008013953",
+  "version": "0.12.2-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",
@@ -43,7 +43,7 @@
   },
   "lint-staged": {
     "*.{js,jsx}": [
-      "npm run format"
+      "npm run format --prefix ./v0"
     ]
   },
   "dependencies": {

package/src/tests/createHeadlessForm.test.js

@@ -63,6 +63,7 @@ import {
   schemaForErrorMessageSpecificity,
   jsfConfigForErrorMessageSpecificity,
   schemaInputTypeFile,
+  schemaWithNestedFieldsetsConditionals,
 } from './helpers';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -2200,6 +2201,191 @@ describe('createHeadlessForm', () => {
           ).toBeUndefined();
         });
       });
+
+      describe('supports conditionals over nested fieldsets', () => {
+        it('retirement_plan fieldset is hidden when no values are provided', () => {
+          const { fields, handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(getField(fields, 'perks', 'retirement_plan').isVisible).toBe(false);
+
+          expect(validateForm({ perks: {} })).toEqual({
+            perks: {
+              benefits_package: 'Required field',
+              has_retirement_plan: 'Required field',
+            },
+          });
+
+          expect(getField(fields, 'perks', 'retirement_plan').isVisible).toBe(false);
+        });
+
+        it("submits without retirement_plan when user selects 'no' for has_retirement_plan", () => {
+          const { fields, handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(
+            validateForm({ perks: { benefits_package: 'basic', has_retirement_plan: 'no' } })
+          ).toBeUndefined();
+
+          expect(getField(fields, 'perks', 'retirement_plan').isVisible).toBe(false);
+        });
+
+        it("retirement_plan fieldset is visible when user selects 'yes' for has_retirement_plan", () => {
+          const { fields, handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'basic',
+                has_retirement_plan: 'yes',
+                declare_amount: 'yes',
+                retirement_plan: { plan_name: 'test', year: 2025 },
+              },
+            })
+          ).toEqual({
+            perks: {
+              retirement_plan: {
+                amount: 'Required field',
+              },
+            },
+          });
+
+          expect(getField(fields, 'perks', 'retirement_plan').isVisible).toBe(true);
+          expect(getField(fields, 'perks', 'declare_amount').isVisible).toBe(true);
+          expect(getField(fields, 'perks', 'declare_amount').default).toBe('yes');
+          expect(getField(fields, 'perks', 'retirement_plan', 'amount').isVisible).toBe(true);
+        });
+
+        it("retirement_plan's amount field is hidden when user selects 'no' for declare_amount", () => {
+          const { fields, handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'basic',
+                has_retirement_plan: 'yes',
+                declare_amount: 'no',
+                retirement_plan: { plan_name: 'test', year: 2025 },
+              },
+            })
+          ).toBeUndefined();
+
+          expect(getField(fields, 'perks', 'retirement_plan').isVisible).toBe(true);
+          expect(getField(fields, 'perks', 'declare_amount').isVisible).toBe(true);
+          expect(getField(fields, 'perks', 'retirement_plan', 'amount').isVisible).toBe(false);
+        });
+
+        it('submits with valid retirement_plan', async () => {
+          const { handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'plus',
+                has_retirement_plan: 'yes',
+                retirement_plan: { plan_name: 'test', year: 2025, amount: 1000 },
+              },
+            })
+          ).toBeUndefined();
+        });
+      });
+
+      describe('supports computed values based on values from nested fieldsets', () => {
+        it("computed value for total_contributions is calculated correctly with defaults when user selects 'yes' for has_retirement_plan", () => {
+          const { fields, handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'basic',
+                has_retirement_plan: 'yes',
+                declare_amount: 'no',
+                retirement_plan: {
+                  plan_name: 'test',
+                  create_plan: 'no',
+                },
+              },
+            })
+          ).toEqual({ perks: { retirement_plan: { year: 'Required field' } } });
+
+          expect(getField(fields, 'total_contributions').isVisible).toBe(true);
+          expect(getField(fields, 'total_contributions').default).toBe(0);
+          expect(getField(fields, 'total_contributions').const).toBe(0);
+        });
+
+        it('computed value for total_contributions is calculated correctly based on the selected months', () => {
+          const { fields, handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'basic',
+                has_retirement_plan: 'yes',
+                declare_amount: 'no',
+                retirement_plan: {
+                  plan_name: 'test',
+                  year: 2025,
+                  create_plan: 'yes',
+                  planned_contributions: {
+                    months: ['january', 'february', 'march', 'april', 'may'],
+                  },
+                },
+              },
+            })
+          ).toBeUndefined();
+
+          expect(getField(fields, 'total_contributions').isVisible).toBe(true);
+          expect(getField(fields, 'total_contributions').default).toBe(5);
+          expect(getField(fields, 'total_contributions').const).toBe(5);
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'basic',
+                has_retirement_plan: 'yes',
+                declare_amount: 'no',
+                retirement_plan: {
+                  plan_name: 'test',
+                  year: 2025,
+                  create_plan: 'yes',
+                  planned_contributions: {
+                    months: ['january', 'february', 'march'],
+                  },
+                },
+              },
+            })
+          ).toBeUndefined();
+
+          expect(getField(fields, 'total_contributions').default).toBe(3);
+          expect(getField(fields, 'total_contributions').const).toBe(3);
+        });
+      });
     });
 
     it('support "email" field type', () => {

package/src/tests/helpers.js

@@ -1939,7 +1939,6 @@ export const schemaWithConditionalToFieldset = {
       then: {
         properties: {
           pto: {
-            $comment: '@BUG: This description does not disappear once activated.',
             description: 'Above 30 hours, the PTO needs to be at least 20 days.',
             minimum: 20,
           },
@@ -1972,6 +1971,389 @@ export const schemaWithConditionalToFieldset = {
   required: ['perks', 'work_hours_per_week'],
 };
 
+export const schemaWithNestedFieldsetsConditionals = {
+  additionalProperties: false,
+  type: 'object',
+  properties: {
+    perks: {
+      additionalProperties: false,
+      properties: {
+        benefits_package: {
+          oneOf: [
+            {
+              const: 'basic',
+              title: 'Basic',
+            },
+            {
+              const: 'plus',
+              title: 'Plus',
+            },
+          ],
+          title: 'Benefits package',
+          type: 'string',
+          'x-jsf-presentation': {
+            inputType: 'radio',
+          },
+        },
+        has_retirement_plan: {
+          oneOf: [
+            {
+              const: 'yes',
+              title: 'Yes',
+            },
+            {
+              const: 'no',
+              title: 'No',
+            },
+          ],
+          title: 'Has retirement plan?',
+          type: 'string',
+          'x-jsf-presentation': {
+            inputType: 'radio',
+          },
+        },
+        declare_amount: {
+          oneOf: [
+            {
+              const: 'yes',
+              title: 'Yes',
+            },
+            {
+              const: 'no',
+              title: 'No',
+            },
+          ],
+          title: 'Declare planned retirement amount?',
+          type: 'string',
+          default: 'yes',
+          'x-jsf-presentation': {
+            inputType: 'radio',
+          },
+        },
+        retirement_plan: {
+          allOf: [
+            {
+              if: {
+                properties: {
+                  create_plan: {
+                    const: 'yes',
+                  },
+                },
+              },
+              then: {},
+              else: {
+                properties: {
+                  planned_contributions: false,
+                },
+              },
+            },
+          ],
+          type: 'object',
+          title: 'Retirement plan',
+          properties: {
+            plan_name: {
+              type: 'string',
+              title: 'Plan name',
+            },
+            year: {
+              type: 'number',
+              title: 'Year',
+              default: 2025,
+            },
+            amount: {
+              type: 'number',
+              title: 'Planned amount',
+            },
+            create_plan: {
+              type: 'radio',
+              title: 'Create plan?',
+              oneOf: [
+                {
+                  const: 'yes',
+                  title: 'Yes',
+                },
+                {
+                  const: 'no',
+                  title: 'No',
+                },
+              ],
+              default: 'yes',
+              'x-jsf-presentation': {
+                inputType: 'radio',
+              },
+            },
+            planned_contributions: {
+              type: 'object',
+              title: 'Planned contributions',
+              properties: {
+                months: {
+                  default: ['january', 'february'],
+                  oneOf: [
+                    {
+                      const: 'january',
+                      title: 'January',
+                    },
+                    {
+                      const: 'february',
+                      title: 'February',
+                    },
+                    {
+                      const: 'march',
+                      title: 'March',
+                    },
+                    {
+                      const: 'april',
+                      title: 'April',
+                    },
+                    {
+                      const: 'may',
+                      title: 'May',
+                    },
+                    {
+                      const: 'june',
+                      title: 'June',
+                    },
+                  ],
+                  title: "Select the months when you'll contribute",
+                  type: 'array',
+                  'x-jsf-presentation': {
+                    inputType: 'checkbox',
+                  },
+                },
+              },
+              'x-jsf-presentation': {
+                inputType: 'fieldset',
+              },
+            },
+          },
+          required: ['plan_name', 'year'],
+          'x-jsf-presentation': {
+            inputType: 'fieldset',
+          },
+        },
+      },
+      required: ['benefits_package', 'has_retirement_plan'],
+      title: 'Perks',
+      type: 'object',
+      'x-jsf-presentation': {
+        inputType: 'fieldset',
+      },
+    },
+    total_contributions: {
+      title: 'Total contributions',
+      description: 'The total contributions for the retirement plan',
+      type: 'number',
+      'x-jsf-presentation': {
+        inputType: 'number',
+      },
+      'x-jsf-logic-computedAttrs': {
+        const: 'total_contributions',
+        default: 'total_contributions',
+        description: 'You will contribute {{total_contributions}} times this year',
+      },
+    },
+  },
+  allOf: [
+    {
+      if: {
+        properties: {
+          perks: {
+            properties: {
+              has_retirement_plan: {
+                const: 'no',
+              },
+            },
+          },
+        },
+      },
+      then: {
+        properties: {
+          perks: {
+            properties: {
+              retirement_plan: false,
+              declare_amount: false,
+            },
+          },
+        },
+      },
+    },
+    {
+      if: {
+        properties: {
+          perks: {
+            properties: {
+              declare_amount: {
+                const: 'no',
+              },
+            },
+            required: ['declare_amount'],
+          },
+        },
+      },
+      then: {
+        properties: {
+          perks: {
+            properties: {
+              retirement_plan: {
+                properties: {
+                  amount: false,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+    {
+      if: {
+        properties: {
+          perks: {
+            properties: {
+              has_retirement_plan: {
+                const: 'yes',
+              },
+              declare_amount: {
+                const: 'yes',
+              },
+            },
+            required: ['has_retirement_plan', 'declare_amount'],
+          },
+        },
+      },
+      then: {
+        properties: {
+          perks: {
+            properties: {
+              retirement_plan: {
+                required: ['amount'],
+              },
+            },
+          },
+        },
+      },
+    },
+  ],
+  'x-jsf-logic': {
+    computedValues: {
+      total_contributions: {
+        rule: {
+          if: [
+            {
+              and: [
+                {
+                  '===': [
+                    {
+                      var: 'perks.has_retirement_plan',
+                    },
+                    'yes',
+                  ],
+                },
+                {
+                  '===': [
+                    {
+                      var: 'perks.retirement_plan.create_plan',
+                    },
+                    'yes',
+                  ],
+                },
+              ],
+            },
+            {
+              '+': [
+                {
+                  if: [
+                    {
+                      in: [
+                        'january',
+                        {
+                          var: 'perks.retirement_plan.planned_contributions.months',
+                        },
+                      ],
+                    },
+                    1,
+                    0,
+                  ],
+                },
+                {
+                  if: [
+                    {
+                      in: [
+                        'february',
+                        {
+                          var: 'perks.retirement_plan.planned_contributions.months',
+                        },
+                      ],
+                    },
+                    1,
+                    0,
+                  ],
+                },
+                {
+                  if: [
+                    {
+                      in: [
+                        'march',
+                        {
+                          var: 'perks.retirement_plan.planned_contributions.months',
+                        },
+                      ],
+                    },
+                    1,
+                    0,
+                  ],
+                },
+                {
+                  if: [
+                    {
+                      in: [
+                        'april',
+                        {
+                          var: 'perks.retirement_plan.planned_contributions.months',
+                        },
+                      ],
+                    },
+                    1,
+                    0,
+                  ],
+                },
+                {
+                  if: [
+                    {
+                      in: [
+                        'may',
+                        {
+                          var: 'perks.retirement_plan.planned_contributions.months',
+                        },
+                      ],
+                    },
+                    1,
+                    0,
+                  ],
+                },
+                {
+                  if: [
+                    {
+                      in: [
+                        'june',
+                        {
+                          var: 'perks.retirement_plan.planned_contributions.months',
+                        },
+                      ],
+                    },
+                    1,
+                    0,
+                  ],
+                },
+              ],
+            },
+            0,
+          ],
+        },
+      },
+    },
+  },
+};
+
 export const schemaWorkSchedule = {
   type: 'object',
   properties: {