adjust payment step

app/javascript/template_builder/field.vue

@@ -93,6 +93,7 @@
             v-if="field.type === 'payment'"
             :field="field"
             @click-condition="isShowConditionsModal = true"
+            @click-description="isShowDescriptionModal = true"
           />
           <span
             v-else

app/javascript/template_builder/payment_settings.vue

@@ -150,6 +150,19 @@
         >Learn more</a>
       </div>
       <hr>
+      <li class="mt-1">
+        <label
+          class="label-text cursor-pointer text-center w-full flex items-center"
+          @click="$emit('click-description')"
+        >
+          <IconInfoCircle
+            width="18"
+          />
+          <span class="text-sm">
+            {{ t('description') }}
+          </span>
+        </label>
+      </li>
       <li class="mt-1">
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
@@ -168,7 +181,7 @@
 </template>
 
 <script>
-import { IconSettings, IconCircleCheck, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
+import { IconSettings, IconCircleCheck, IconInfoCircle, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
 import { ref } from 'vue'
 
 const isConnected = ref(false)
@@ -179,6 +192,7 @@ export default {
     IconSettings,
     IconCircleCheck,
     IconRouteAltLeft,
+    IconInfoCircle,
     IconInnerShadowTop,
     IconBrandStripe
   },
@@ -189,7 +203,7 @@ export default {
       required: true
     }
   },
-  emits: ['click-condition'],
+  emits: ['click-condition', 'click-description'],
   data () {
     return {
       isLoading: false