add field conditions placeholder

app/controllers/api/templates_controller.rb

@@ -89,6 +89,7 @@ module Api
           submitters: [%i[name uuid]],
           fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
                     { preferences: {},
+                      conditions: [%i[field_uuid value action]],
                       options: [%i[value uuid]],
                       areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
       ]

app/javascript/application.js

@@ -91,6 +91,7 @@ window.customElements.define('template-builder', class extends HTMLElement {
       editable: this.dataset.editable !== 'false',
       withPayment: this.dataset.withPayment === 'true',
       withFormula: this.dataset.withFormula === 'true',
+      withConditions: this.dataset.withConditions === 'true',
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
       acceptFileTypes: this.dataset.acceptFileTypes,
       isDirectUpload: this.dataset.isDirectUpload === 'true'

app/javascript/application.scss

@@ -125,3 +125,7 @@ button[disabled] .enabled {
   outline-offset: 3px;
   outline-color: hsl(var(--bc) / 0.2);
 }
+
+select:required:invalid {
+  color: gray !important;
+}

app/javascript/submission_form/form.vue

@@ -621,6 +621,13 @@ export default {
     submitterSlug () {
       return this.submitter.slug
     },
+    fieldsUuidIndex () {
+      return this.fields.reduce((acc, f) => {
+        acc[f.uuid] = f
+
+        return acc
+      }, {})
+    },
     previousInitialsValue () {
       const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
 
@@ -646,10 +653,12 @@ export default {
       return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
         const prevStep = acc[acc.length - 1]
 
-        if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
+        if (this.checkFieldConditions(f)) {
-          prevStep.push(f)
+          if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
-        } else {
+            prevStep.push(f)
-          acc.push([f])
+          } else {
+            acc.push([f])
+          }
         }
 
         return acc
@@ -739,6 +748,40 @@ export default {
     t (key) {
       return this.i18n[key] || i18n[this.language?.toLowerCase()]?.[key] || i18n[this.browserLanguage]?.[key] || i18n.en[key] || key
     },
+    checkFieldConditions (field) {
+      if (field.conditions?.length) {
+        return field.conditions.reduce((acc, c) => {
+          if (['empty', 'unchecked'].includes(c.action)) {
+            return acc && isEmpty(this.values[c.field_uuid])
+          } else if (['not_empty', 'checked'].includes(c.action)) {
+            return acc && !isEmpty(this.values[c.field_uuid])
+          } else if (['equal', 'contains'].includes(c.action)) {
+            const field = this.fieldsUuidIndex[c.field_uuid]
+            const option = field.options.find((o) => o.uuid === c.value)
+            const values = [this.values[c.field_uuid]].flat()
+
+            return acc && values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else if (['not_equal', 'does_not_contain'].includes(c.action)) {
+            const field = this.fieldsUuidIndex[c.field_uuid]
+            const option = field.options.find((o) => o.uuid === c.value)
+            const values = [this.values[c.field_uuid]].flat()
+
+            return acc && !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return acc
+          }
+        }, true)
+      } else {
+        return true
+      }
+    },
+    optionValue (option, index) {
+      if (option.value) {
+        return option.value
+      } else {
+        return `${this.t('option')} ${index + 1}`
+      }
+    },
     maybeTrackEmailClick () {
       const { queryParams } = this
 

app/javascript/template_builder/builder.vue

@@ -323,6 +323,7 @@ export default {
       withPhone: this.withPhone,
       withPayment: this.withPayment,
       withFormula: this.withFormula,
+      withConditions: this.withConditions,
       defaultDrawFieldType: this.defaultDrawFieldType,
       selectedAreaRef: computed(() => this.selectedAreaRef),
       fieldsDragFieldRef: computed(() => this.fieldsDragFieldRef)
@@ -457,6 +458,11 @@ export default {
       required: false,
       default: false
     },
+    withConditions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     onlyDefinedFields: {
       type: Boolean,
       required: false,

app/javascript/template_builder/conditions_modal.vue

@@ -0,0 +1,195 @@
+<template>
+  <div
+    class="modal modal-open items-start !animate-none overflow-y-auto"
+  >
+    <div
+      class="absolute top-0 bottom-0 right-0 left-0"
+      @click.prevent="$emit('close')"
+    />
+    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+        <span>
+          {{ t('condition') }} - {{ field.name || buildDefaultName(field, template.fields) }}
+        </span>
+        <a
+          href="#"
+          class="text-xl"
+          @click.prevent="$emit('close')"
+        >&times;</a>
+      </div>
+      <div>
+        <div
+          v-if="!withConditions"
+          class="bg-base-300 rounded-xl py-2 px-3 text-center"
+        >
+          <a
+            href="https://www.docuseal.co/pricing"
+            target="_blank"
+            class="link"
+          >Available in Pro</a>
+        </div>
+        <form @submit.prevent="validateSaveAndClose">
+          <div class="my-4">
+            <div class="space-y-4">
+              <select
+                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                required
+                @change="[
+                  newCondition.field_uuid = $event.target.value,
+                  delete newCondition.value,
+                  (conditionActions.includes(newCondition.action) ? '' : newCondition.action = conditionActions[0])
+                ]"
+              >
+                <option
+                  value=""
+                  disabled
+                  :selected="!newCondition.field_uuid"
+                >
+                  {{ t('select_field_') }}
+                </option>
+                <option
+                  v-for="f in fields"
+                  :key="f.uuid"
+                  :value="f.uuid"
+                  :selected="newCondition.field_uuid === f.uuid"
+                >
+                  {{ f.name || buildDefaultName(f, template.fields) }}
+                </option>
+              </select>
+              <select
+                v-model="newCondition.action"
+                class="select select-bordered select-sm w-full h-11 pl-4 text-base font-normal"
+                :class="{ 'bg-white': newCondition.field_uuid, 'bg-base-300': !newCondition.field_uuid }"
+                :required="newCondition.field_uuid"
+              >
+                <option
+                  v-for="action in conditionActions"
+                  :key="action"
+                  :value="action"
+                >
+                  {{ t(action) }}
+                </option>
+              </select>
+              <select
+                v-if="conditionField?.options?.length"
+                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                required
+                @change="newCondition.value = $event.target.value"
+              >
+                <option
+                  value=""
+                  disabled
+                  selected
+                >
+                  {{ t('select_value_') }}
+                </option>
+                <option
+                  v-for="(option, index) in conditionField.options"
+                  :key="option.uuid"
+                  :value="option.uuid"
+                  :selected="newCondition.value === option.uuid"
+                >
+                  {{ option.value || `${t('option')} ${index + 1}` }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <button
+            class="base-button w-full mt-2"
+          >
+            {{ t('save') }}
+          </button>
+        </form>
+        <div
+          v-if="field.conditions?.[0]?.field_uuid"
+          class="text-center w-full mt-4"
+        >
+          <button
+            class="link"
+            @click="[newCondition.field_uuid = null, delete field.conditions, validateSaveAndClose()]"
+          >
+            {{ t('remove_condition') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ConditionModal',
+  inject: ['t', 'save', 'template', 'withConditions'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    buildDefaultName: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  data () {
+    return {
+      newCondition: this.field.conditions?.[0] || {}
+    }
+  },
+  computed: {
+    conditionField () {
+      return this.fields.find((f) => f.uuid === this.newCondition.field_uuid)
+    },
+    conditionActions () {
+      return this.fieldActions(this.conditionField)
+    },
+    fields () {
+      return this.template.fields.reduce((acc, f) => {
+        if (f !== this.field && f.submitter_uuid === this.field.submitter_uuid) {
+          acc.push(f)
+        }
+
+        return acc
+      }, [])
+    }
+  },
+  created () {
+    this.field.conditions ||= []
+  },
+  methods: {
+    fieldActions (field) {
+      const actions = []
+
+      if (!field) {
+        return actions
+      }
+
+      if (field.type === 'checkbox') {
+        actions.push('checked', 'unchecked')
+      } else if (['radio', 'select'].includes(field.type)) {
+        actions.push('equal', 'not_equal')
+      } else if (['multiple'].includes(field.type)) {
+        actions.push('contains', 'does_not_contain')
+      } else {
+        actions.push('not_empty', 'empty')
+      }
+
+      return actions
+    },
+    validateSaveAndClose () {
+      if (!this.withConditions) {
+        return alert('Available only in Pro')
+      }
+
+      if (this.newCondition.field_uuid) {
+        this.field.conditions = [this.newCondition]
+      } else {
+        delete this.field.conditions
+      }
+
+      this.save()
+      this.$emit('close')
+    }
+  }
+}
+</script>

app/javascript/template_builder/field.vue

@@ -68,7 +68,7 @@
           <button
             v-if="field.preferences?.formula"
             class="relative cursor-pointer text-transparent group-hover:text-base-content"
-            :disabled="!withFormula"
+            :title="t('formula')"
             @click="isShowFormulaModal = true"
           >
             <IconMathFunction
@@ -76,6 +76,17 @@
               :stroke-width="1.6"
             />
           </button>
+          <button
+            v-if="field.conditions?.length"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
+            :title="t('condition')"
+            @click="isShowConditionsModal = true"
+          >
+            <IconRouteAltLeft
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
           <PaymentSettings
             v-if="field.type === 'payment'"
             :field="field"
@@ -204,26 +215,6 @@
                   <span class="label-text">{{ t('required') }}</span>
                 </label>
               </li>
-              <li
-                v-if="field.type == 'number'"
-                :class="{'tooltip tooltip-bottom': !withFormula}"
-                :data-tip="withFormula ? '' : 'Available in Pro'"
-                @click.stop
-              >
-                <label
-                  class="label-text cursor-pointer py-1.5 text-center w-full flex items-center"
-                  @click="isShowFormulaModal = withFormula"
-                >
-                  <IconMathFunction
-                    width="18px"
-                    height="18px"
-                    class="ml-0.5 mr-1"
-                  />
-                  <span class="text-sm">
-                    {{ t('formula') }}
-                  </span>
-                </label>
-              </li>
               <li
                 v-if="field.type == 'checkbox'"
                 @click.stop
@@ -267,6 +258,33 @@
                 </label>
               </li>
               <hr class="pb-0.5 mt-0.5">
+              <li>
+                <label
+                  class="label-text cursor-pointer text-center w-full flex items-center"
+                  @click="isShowConditionsModal = !isShowConditionsModal"
+                >
+                  <IconRouteAltLeft
+                    width="18"
+                  />
+                  <span class="text-sm">
+                    {{ t('condition') }}
+                  </span>
+                </label>
+              </li>
+              <li v-if="field.type == 'number'">
+                <label
+                  class="label-text cursor-pointer text-center w-full flex items-center"
+                  @click="isShowFormulaModal = true"
+                >
+                  <IconMathFunction
+                    width="18"
+                  />
+                  <span class="text-sm">
+                    {{ t('formula') }}
+                  </span>
+                </label>
+              </li>
+              <hr class="pb-0.5 mt-0.5">
               <li
                 v-for="(area, index) in field.areas || []"
                 :key="index"
@@ -406,6 +424,16 @@
         @close="isShowFormulaModal = false"
       />
     </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :field="field"
+        :build-default-name="buildDefaultName"
+        @close="isShowConditionsModal = false"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -414,7 +442,8 @@ import Contenteditable from './contenteditable'
 import FieldType from './field_type'
 import PaymentSettings from './payment_settings'
 import FormulaModal from './formula_modal'
-import { IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
+import ConditionsModal from './conditions_modal'
+import { IconRouteAltLeft, IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
@@ -426,12 +455,14 @@ export default {
     PaymentSettings,
     IconNewSection,
     FormulaModal,
+    ConditionsModal,
+    IconRouteAltLeft,
     IconTrashX,
     IconMathFunction,
     IconCopy,
     FieldType
   },
-  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't', 'withFormula'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
   props: {
     field: {
       type: Object,
@@ -454,6 +485,7 @@ export default {
       isNameFocus: false,
       showPaymentModal: false,
       isShowFormulaModal: false,
+      isShowConditionsModal: false,
       renderDropdown: false
     }
   },

app/javascript/template_builder/fields.vue

@@ -278,6 +278,14 @@ export default {
     removeField (field) {
       this.fields.splice(this.fields.indexOf(field), 1)
 
+      this.fields.forEach((f) => {
+        (f.conditions || []).forEach((c) => {
+          if (c.field_uuid === field.uuid) {
+            f.conditions.splice(f.conditions.indexOf(c), 1)
+          }
+        })
+      })
+
       this.save()
     },
     addField (type, area = null) {

app/javascript/template_builder/formula_modal.vue

@@ -9,7 +9,7 @@
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
         <span>
-          {{ t('formula') }}
+          {{ t('formula') }} - {{ field.name || buildDefaultName(field, template.fields) }}
         </span>
         <a
           href="#"
@@ -18,6 +18,16 @@
         >&times;</a>
       </div>
       <div>
+        <div
+          v-if="!withFormula"
+          class="bg-base-300 rounded-xl py-2 px-3 text-center"
+        >
+          <a
+            href="https://www.docuseal.co/pricing"
+            target="_blank"
+            class="link"
+          >Available in Pro</a>
+        </div>
         <div class="flex-inline mb-2 gap-2 space-y-1">
           <button
             v-for="f in fields"
@@ -118,7 +128,7 @@ export default {
   components: {
     IconCodePlus
   },
-  inject: ['t', 'save', 'template'],
+  inject: ['t', 'save', 'template', 'withFormula'],
   props: {
     field: {
       type: Object,
@@ -178,6 +188,10 @@ export default {
       })
     },
     validateSaveAndClose () {
+      if (!this.withFormula) {
+        return alert('Available only in Pro')
+      }
+
       const normalizedFormula = this.normalizeFormula(this.formula)
 
       if (normalizedFormula.includes('FIELD NOT FOUND')) {

app/javascript/template_builder/i18n.js

@@ -1,4 +1,14 @@
 const en = {
+  unchecked: 'Unchecked',
+  equal: 'Equal',
+  not_equal: 'Not equal',
+  contains: 'Contains',
+  does_not_contain: 'Does not contain',
+  not_empty: 'Not empty',
+  empty: 'Empty',
+  select_field_: 'Select field...',
+  select_value_: 'Select value...',
+  remove_condition: 'Remove condition',
   are_you_sure: 'Are you sure?',
   sign_yourself: 'Sign Yourself',
   set_signing_date: 'Set signing date',
@@ -31,6 +41,7 @@ const en = {
   copy_to_all_pages: 'Copy to All Pages',
   add_option: 'Add option',
   option: 'Option',
+  condition: 'Condition',
   first_party: 'First Party',
   second_party: 'Second Party',
   third_party: 'Third Party',

package.json

@@ -10,7 +10,7 @@
     "@hotwired/turbo": "https://github.com/docusealco/turbo#main",
     "@hotwired/turbo-rails": "^7.3.0",
     "@rails/activestorage": "^7.0.0",
-    "@tabler/icons-vue": "^2.20.0",
+    "@tabler/icons-vue": "^2.47.0",
     "autocompleter": "^9.1.0",
     "autoprefixer": "^10.4.14",
     "babel-loader": "9.1.2",

yarn.lock

@@ -1137,17 +1137,17 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
   integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
 
-"@tabler/icons-vue@^2.20.0":
+"@tabler/icons-vue@^2.47.0":
-  version "2.20.0"
+  version "2.47.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons-vue/-/icons-vue-2.20.0.tgz#e8ff057727feceb58e480643d9fa0aace135c5b8"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-vue/-/icons-vue-2.47.0.tgz#604608a6df673d035c0e8e33f0565eeffa3adf36"
-  integrity sha512-KLu2XjeUBScUlTq3GbISinXsolBnEIm/nGdQoUqlWaFH5haBlHYmv/pHTZuBdW32uRxzGnidxfu/LT3DvAU/AQ==
+  integrity sha512-huEDak5xouwsRjbTUZlYZny9kC8ez61vdx/KwhR2Uc5HcUpxpFy+7p+IKH/ZZ48IcTHmCbdBJgbFRUI1mePJog==
   dependencies:
-    "@tabler/icons" "2.20.0"
+    "@tabler/icons" "2.47.0"
 
-"@tabler/icons@2.20.0":
+"@tabler/icons@2.47.0":
-  version "2.20.0"
+  version "2.47.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.20.0.tgz#42a11bb91b9d347fdf6b296274cf68998122bb10"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.47.0.tgz#c41c680d1947e3ab2d60af3febc4132287c60596"
-  integrity sha512-BsUEJoqREs8bqcrf5HfJBq6/rDvsRI3h+T+0X1o7i8LBHonsH0iAngcyL0I82YKoSy9NiVDvM3LV63zDP0nPYQ==
+  integrity sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==
 
 "@trysound/sax@0.2.0":
   version "0.2.0"