adjust payment settings

app/javascript/template_builder/area_title.vue

@@ -146,6 +146,41 @@
         </li>
       </ul>
     </span>
+    <PaymentSettings
+      v-else-if="isMobile && editable && field.type === 'payment'"
+      class="-ml-1"
+      :field="field"
+      :with-force-open="false"
+      :background-color="'white'"
+      :menu-classes="'rounded-t-none pt-1'"
+      @click-condition="openConditionsModal"
+      @click-description="openDescriptionModal"
+      @click-formula="openFormulaModal"
+    >
+      <label
+        tabindex="0"
+        :title="t('settings')"
+        class="cursor-pointer flex items-center pr-0.5"
+        style="height: 25px"
+      >
+        <IconDotsVertical class="w-5 h-5" />
+      </label>
+      <template #menu>
+        <li class="field-settings-remove">
+          <a
+            href="#"
+            class="text-sm py-1 px-2 text-red-600"
+            @click.prevent="$emit('remove')"
+          >
+            <IconTrashX
+              :width="20"
+              :stroke-width="1.6"
+            />
+            {{ t('remove') }}
+          </a>
+        </li>
+      </template>
+    </PaymentSettings>
     <button
       v-else-if="editable && !isShowControls"
       class="pr-1"
@@ -213,6 +248,7 @@ import FieldSubmitter from './field_submitter'
 import FieldType from './field_type'
 import Field from './field'
 import FieldSettings from './field_settings'
+import PaymentSettings from './payment_settings'
 import FormulaModal from './formula_modal'
 import FontModal from './font_modal'
 import ConditionsModal from './conditions_modal'
@@ -226,6 +262,7 @@ export default {
     IconTrashX,
     FieldType,
     FieldSettings,
+    PaymentSettings,
     FormulaModal,
     FontModal,
     IconDotsVertical,

app/javascript/template_builder/custom_field.vue

@@ -47,6 +47,7 @@
           <PaymentSettings
             v-if="field.type === 'payment' && !isNew"
             :field="field"
+            :background-color="dropdownBgColor"
             :with-condition="false"
             :with-force-open="false"
             @click-description="openDescriptionModal"

app/javascript/template_builder/field.vue

@@ -96,13 +96,56 @@
           <PaymentSettings
             v-if="field.type === 'payment'"
             :field="field"
+            :background-color="dropdownBgColor"
             :with-custom-fields="withCustomFields"
             @click-condition="openConditionsModal"
             @click-description="openDescriptionModal"
             @add-custom-field="$emit('add-custom-field', $event)"
             @click-formula="openFormulaModal"
             @save="$emit('save')"
-          />
+          >
+            <template
+              v-if="isMobile"
+              #default
+            >
+              <label
+                tabindex="0"
+                :title="t('settings')"
+                class="cursor-pointer flex items-center pr-1"
+                :class="iconColorClass"
+                @touchstart="onHandleTouchstart"
+                @touchmove="onHandleTouchmove"
+                @touchend="onHandleTouchend"
+                @touchcancel="onHandleTouchend"
+                @mousedown="dropdownWasOpen = $event.currentTarget.parentElement.contains($event.currentTarget.getRootNode().activeElement)"
+                @click="dropdownWasOpen && closeDropdown()"
+              >
+                <IconDotsVertical
+                  :width="18"
+                  :height="18"
+                  :stroke-width="1.6"
+                />
+              </label>
+            </template>
+            <template #menu>
+              <li
+                v-if="isMobile"
+                class="field-settings-remove"
+              >
+                <a
+                  href="#"
+                  class="text-sm py-1 px-2 text-red-600"
+                  @click.prevent="$emit('remove', field)"
+                >
+                  <IconTrashX
+                    :width="20"
+                    :stroke-width="1.6"
+                  />
+                  {{ t('remove') }}
+                </a>
+              </li>
+            </template>
+          </PaymentSettings>
           <span
             v-else
             class="dropdown dropdown-end field-settings-dropdown"

app/javascript/template_builder/payment_settings.vue

@@ -3,19 +3,23 @@
     class="dropdown dropdown-end field-settings-dropdown"
     :class="{ 'dropdown-open': withForceOpen && !field.preferences?.price && !field.preferences?.formula && !field.preferences?.price_id && !field.preferences?.payment_link_id && !isLoading }"
   >
-    <label
-      tabindex="0"
-      :title="t('settings')"
-      class="cursor-pointer text-transparent group-hover:text-base-content"
-    >
-      <IconSettings
-        :width="18"
-        :stroke-width="1.6"
-      />
-    </label>
+    <slot>
+      <label
+        tabindex="0"
+        :title="t('settings')"
+        class="cursor-pointer text-transparent group-hover:text-base-content"
+      >
+        <IconSettings
+          :width="18"
+          :stroke-width="1.6"
+        />
+      </label>
+    </slot>
     <ul
       tabindex="0"
-      class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
+      class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+      :class="menuClasses"
+      :style="{ backgroundColor }"
       draggable="true"
       @dragstart.prevent.stop
       @click="closeDropdown"
@@ -28,7 +32,7 @@
         <select
           v-model="field.preferences.currency"
           :placeholder="t('price')"
-          class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
+          class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
           @change="save"
         >
           <option
@@ -40,7 +44,7 @@
           </option>
         </select>
         <label
-          :style="{ backgroundColor: backgroundColor }"
+          :style="{ backgroundColor }"
           class="absolute -top-1 left-2.5 px-1 h-4"
           style="font-size: 8px"
         >
@@ -55,14 +59,14 @@
           v-if="isStripe && 'payment_link_id' in field.preferences"
           v-model="field.preferences.payment_link_id"
           placeholder="plink_XXXXX"
-          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
           @blur="save"
         >
         <input
           v-else-if="isStripe && 'price_id' in field.preferences"
           v-model="field.preferences.price_id"
           placeholder="Price ID: price_XXXXX"
-          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
           @blur="save"
         >
         <input
@@ -70,7 +74,7 @@
           type="number"
           :placeholder="t('price')"
           disabled="true"
-          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
           @blur="save"
         >
         <input
@@ -78,12 +82,12 @@
           v-model="field.preferences.price"
           type="number"
           :placeholder="t('price')"
-          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
           @blur="save"
         >
         <label
           v-if="(field.preferences.price || field.preferences.price_id || field.preferences.payment_link_id) && (!field.preferences.formula || ('price_id' in field.preferences) || ('payment_link_id' in field.preferences))"
-          :style="{ backgroundColor: backgroundColor }"
+          :style="{ backgroundColor }"
           class="absolute -top-1 left-2.5 px-1 h-4"
           style="font-size: 8px"
         >
@@ -264,6 +268,7 @@
           {{ t('save_as_custom_field') }}
         </a>
       </li>
+      <slot name="menu" />
     </ul>
   </span>
 </template>
@@ -287,7 +292,7 @@ export default {
     IconBrandStripe,
     IconBrandPaypal
   },
-  inject: ['backgroundColor', 'save', 'currencies', 't', 'isStripeConnected', 'isPaypalConnected', 'withStripe', 'withPaypal', 'withFormula', 'withConditions', 'nativePlatform'],
+  inject: ['save', 'currencies', 't', 'isStripeConnected', 'isPaypalConnected', 'withStripe', 'withPaypal', 'withFormula', 'withConditions', 'nativePlatform'],
   props: {
     field: {
       type: Object,
@@ -307,6 +312,16 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: null
+    },
+    menuClasses: {
+      type: String,
+      required: false,
+      default: 'mt-1.5'
     }
   },
   emits: ['click-condition', 'click-description', 'click-formula', 'add-custom-field'],