adjust payment settings

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'],