adjust payment step

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