add recurrent payment

app/javascript/template_builder/i18n.js

@@ -1,5 +1,7 @@
 const en = {
   editable: 'Editable',
+  recurrent: 'Recurrent',
+  one_off: 'One-off',
   search_field: 'Search field',
   field_not_found: 'Field not found',
   clear: 'Clear',
@@ -151,6 +153,8 @@ const en = {
 }
 
 const es = {
+  recurrent: 'Recurrente',
+  one_off: 'Único',
   editable: 'Editable',
   search_field: 'Campo de búsqueda',
   field_not_found: 'Campo no encontrado',
@@ -303,6 +307,8 @@ const es = {
 }
 
 const it = {
+  ricorrente: 'Ricorrente',
+  una_volta: 'Una volta',
   editable: 'Modificabile',
   search_field: 'Campo di ricerca',
   field_not_found: 'Campo non trovato',
@@ -455,6 +461,8 @@ const it = {
 }
 
 const pt = {
+  recurrent: 'Recurrente',
+  one_off: 'Único',
   editable: 'Editável',
   search_field: 'Campo de busca',
   field_not_found: 'Campo não encontrado',
@@ -607,6 +615,8 @@ const pt = {
 }
 
 const fr = {
+  recurrent: 'Récurrent',
+  one_off: 'Ponctuel',
   editable: 'Éditable',
   search_field: 'Champ de recherche',
   field_not_found: 'Champ non trouvé',
@@ -759,6 +769,8 @@ const fr = {
 }
 
 const de = {
+  wiederkehrend: 'Wiederkehrend',
+  einmalig: 'Einmalig',
   editable: 'Bearbeitbar',
   search_field: 'Suchfeld',
   field_not_found: 'Feld nicht gefunden',

app/javascript/template_builder/payment_settings.vue

@@ -21,6 +21,7 @@
       @click="closeDropdown"
     >
       <div
+        v-if="!('price_id' in field.preferences)"
         class="py-1.5 px-1 relative"
         @click.stop
       >
@@ -58,6 +59,13 @@
           class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
           @blur="save"
         >
+        <input
+          v-else-if="'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"
+          @blur="save"
+        >
         <input
           v-else
           v-model="field.preferences.price"
@@ -74,6 +82,23 @@
         >
           {{ t('price') }}
         </label>
+        <div class="flex items-center justify-center">
+          <a
+            href="#"
+            class="hover:underline"
+            style="font-size: 11px"
+            :class="{'underline': !('price_id' in field.preferences)}"
+            @click="delete field.preferences.price_id"
+          >{{ t('one_off') }}</a>
+          <span class="h-2.5 border-l border-base-content mx-1" />
+          <a
+            href="#"
+            class="hover:underline"
+            style="font-size: 11px"
+            :class="{'underline': ('price_id' in field.preferences)}"
+            @click="field.preferences.price_id ??= ''"
+          >{{ t('recurrent') }}</a>
+        </div>
       </div>
       <div
         v-if="!isConnected || isOauthSuccess"
@@ -158,7 +183,10 @@
           data-turbo="false"
         >{{ t('learn_more') }}</a>
       </div>
-      <li class="mb-1">
+      <li
+        v-if="!('price_id' in field.preferences)"
+        class="mb-1"
+      >
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
           @click="$emit('click-formula')"