adjust payment step

app/javascript/submission_form/form.vue

@@ -388,6 +388,7 @@
             v-model="values[currentField.uuid]"
             :field="currentField"
             :submitter-slug="submitterSlug"
+            :values="values"
             @attached="attachments.push($event)"
             @focus="scrollIntoField(currentField)"
             @submit="submitStep"
@@ -808,7 +809,7 @@ export default {
       }, [])
     },
     formulaFields () {
-      return this.fields.filter((f) => f.preferences?.formula)
+      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment')
     },
     attachmentsIndex () {
       return this.attachments.reduce((acc, a) => {

app/javascript/submission_form/payment_step.vue

@@ -93,6 +93,10 @@ export default {
       type: Object,
       required: true
     },
+    values: {
+      type: Object,
+      required: true
+    },
     submitterSlug: {
       type: String,
       required: true
@@ -101,7 +105,8 @@ export default {
   emits: ['focus', 'submit', 'update:model-value', 'attached'],
   data () {
     return {
-      isCreatingCheckout: false
+      isCreatingCheckout: false,
+      isMathLoaded: false
     }
   },
   computed: {
@@ -114,15 +119,23 @@ export default {
     defaultName () {
       const { price, currency } = this.field.preferences || {}
 
-      const formattedPrice = new Intl.NumberFormat([], {
+      const formatter = new Intl.NumberFormat([], {
         style: 'currency',
         currency
-      }).format(price)
+      })
 
-      return this.t('pay') + ' ' + formattedPrice
+      if (this.field.preferences?.formula) {
+        if (this.isMathLoaded) {
+          return this.t('pay') + ' ' + formatter.format(this.calculateFormula())
+        } else {
+          return ''
+        }
+      } else {
+        return this.t('pay') + ' ' + formatter.format(price)
+      }
     }
   },
-  mounted () {
+  async mounted () {
     if (this.sessionId) {
       this.$emit('submit')
     }
@@ -130,8 +143,48 @@ export default {
     if (!this.sessionId) {
       this.postCheckout({ checkStatus: true })
     }
+
+    if (this.field.preferences?.formula) {
+      const {
+        create,
+        evaluateDependencies,
+        addDependencies,
+        subtractDependencies,
+        divideDependencies,
+        multiplyDependencies,
+        powDependencies,
+        roundDependencies,
+        absDependencies,
+        sinDependencies,
+        tanDependencies,
+        cosDependencies
+      } = await import('mathjs')
+
+      this.math = create({
+        evaluateDependencies,
+        addDependencies,
+        subtractDependencies,
+        divideDependencies,
+        multiplyDependencies,
+        powDependencies,
+        roundDependencies,
+        absDependencies,
+        sinDependencies,
+        tanDependencies,
+        cosDependencies
+      })
+
+      this.isMathLoaded = true
+    }
   },
   methods: {
+    calculateFormula () {
+      const transformedFormula = this.field.preferences.formula.replace(/{{(.*?)}}/g, (match, uuid) => {
+        return this.values[uuid] || 0.0
+      })
+
+      return this.math.evaluate(transformedFormula.toLowerCase())
+    },
     async submit () {
       if (this.sessionId) {
         return fetch(this.baseUrl + '/api/stripe_payments/' + this.sessionId, {

app/javascript/template_builder/field.vue

@@ -94,6 +94,7 @@
             :field="field"
             @click-condition="isShowConditionsModal = true"
             @click-description="isShowDescriptionModal = true"
+            @click-formula="isShowFormulaModal = true"
           />
           <span
             v-else-if="field.type !== 'heading'"
@@ -345,7 +346,7 @@ export default {
   },
   methods: {
     buildDefaultName (field, fields) {
-      if (field.type === 'payment' && field.preferences?.price) {
+      if (field.type === 'payment' && field.preferences?.price && !field.preferences?.formula) {
         const { price, currency } = field.preferences || {}
 
         const formattedPrice = new Intl.NumberFormat([], {

app/javascript/template_builder/formula_modal.vue

@@ -204,7 +204,10 @@ export default {
         alert('Some fields are missing in the formula.')
       } else {
         this.field.preferences.formula = normalizedFormula
-        this.field.readonly = !!normalizedFormula
+
+        if (this.field.type !== 'payment') {
+          this.field.readonly = !!normalizedFormula
+        }
 
         this.save()
 

app/javascript/template_builder/i18n.js

@@ -17,6 +17,7 @@ const en = {
   display_title: 'Display title',
   with_logo: 'With logo',
   unchecked: 'Unchecked',
+  price: 'Price',
   type_value: 'Type value',
   equal: 'Equal',
   not_equal: 'Not equal',

app/javascript/template_builder/payment_settings.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     class="dropdown dropdown-end"
-    :class="{ 'dropdown-open': (!field.preferences?.price || !isConnected) && !isLoading }"
+    :class="{ 'dropdown-open': ((!field.preferences?.price && !field.preferences?.formula) || !isConnected) && !isLoading }"
   >
     <label
       tabindex="0"
@@ -26,7 +26,7 @@
       >
         <select
           v-model="field.preferences.currency"
-          placeholder="Price"
+          :placeholder="t('price')"
           class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
           @change="save"
         >
@@ -51,14 +51,23 @@
         @click.stop
       >
         <input
+          v-if="field.preferences.formula"
+          type="number"
+          :placeholder="t('price')"
+          disabled="true"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          @blur="save"
+        >
+        <input
+          v-else
           v-model="field.preferences.price"
           type="number"
-          placeholder="Price"
+          :placeholder="t('price')"
           class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
           @blur="save"
         >
         <label
-          v-if="field.preferences.price"
+          v-if="field.preferences.price && !field.preferences.formula"
           :style="{ backgroundColor: backgroundColor }"
           class="absolute -top-1 left-2.5 px-1 h-4"
           style="font-size: 8px"
@@ -149,8 +158,21 @@
           data-turbo="false"
         >Learn more</a>
       </div>
+      <li class="mb-1">
+        <label
+          class="label-text cursor-pointer text-center w-full flex items-center"
+          @click="$emit('click-formula')"
+        >
+          <IconMathFunction
+            width="18"
+          />
+          <span class="text-sm">
+            {{ t('formula') }}
+          </span>
+        </label>
+      </li>
       <hr>
-      <li class="mt-1">
+      <li>
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
           @click="$emit('click-description')"
@@ -181,7 +203,7 @@
 </template>
 
 <script>
-import { IconSettings, IconCircleCheck, IconInfoCircle, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
+import { IconMathFunction, IconSettings, IconCircleCheck, IconInfoCircle, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
 import { ref } from 'vue'
 
 const isConnected = ref(false)
@@ -193,6 +215,7 @@ export default {
     IconCircleCheck,
     IconRouteAltLeft,
     IconInfoCircle,
+    IconMathFunction,
     IconInnerShadowTop,
     IconBrandStripe
   },
@@ -203,7 +226,7 @@ export default {
       required: true
     }
   },
-  emits: ['click-condition', 'click-description'],
+  emits: ['click-condition', 'click-description', 'click-formula'],
   data () {
     return {
       isLoading: false