payment link

app/javascript/submission_form/payment_step.vue

@@ -133,7 +133,7 @@ export default {
       return this.queryParams.get('stripe_session_id')
     },
     defaultName () {
-      if (this.field.preferences?.price_id) {
+      if (this.field.preferences?.price_id || this.field.preferences?.payment_link_id) {
         return ''
       }
 

app/javascript/template_builder/i18n.js

@@ -1,4 +1,5 @@
 const en = {
+  payment_link: 'Payment link',
   strikeout: 'Strikeout',
   draw_strikethrough_the_document: 'Draw strikethrough the document',
   quantity: 'Quantity',
@@ -179,6 +180,7 @@ const en = {
 }
 
 const es = {
+  payment_link: 'Enlace de pago',
   strikeout: 'Tachar',
   draw_strikethrough_the_document: 'Dibujar una línea de tachado en el documento',
   quantity: 'Cantidad',
@@ -359,6 +361,7 @@ const es = {
 }
 
 const it = {
+  payment_link: 'Link di pagamento',
   strikeout: 'Barrato',
   draw_strikethrough_the_document: 'Disegna una linea barrata sul documento',
   quantity: 'Quantità',
@@ -539,6 +542,7 @@ const it = {
 }
 
 const pt = {
+  payment_link: 'Link de pagamento',
   strikeout: 'Tachado',
   draw_strikethrough_the_document: 'Desenhe uma linha de tachado no documento',
   quantity: 'Quantidade',
@@ -719,6 +723,7 @@ const pt = {
 }
 
 const fr = {
+  payment_link: 'Lien de paiement',
   strikeout: 'Barrer',
   draw_strikethrough_the_document: 'Tracer une ligne de suppression sur le document',
   quantity: 'Quantité',
@@ -899,6 +904,7 @@ const fr = {
 }
 
 const de = {
+  payment_link: 'Zahlungslink',
   strikeout: 'Streichung',
   draw_strikethrough_the_document: 'Ziehe eine Streichung auf das Dokument',
   quantity: 'Menge',

app/javascript/template_builder/payment_settings.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     class="dropdown dropdown-end field-settings-dropdown"
-    :class="{ 'dropdown-open': ((!field.preferences?.price && !field.preferences?.formula) || !isConnected) && !isLoading }"
+    :class="{ 'dropdown-open': ((!field.preferences?.price && !field.preferences?.formula && !field.preferences?.price_id && !field.preferences?.payment_link_id) || !isConnected) && !isLoading }"
   >
     <label
       tabindex="0"
@@ -21,7 +21,7 @@
       @click="closeDropdown"
     >
       <div
-        v-if="!('price_id' in field.preferences)"
+        v-if="!('price_id' in field.preferences) && !('payment_link_id' in field.preferences)"
         class="py-1.5 px-1 relative"
         @click.stop
       >
@@ -52,7 +52,14 @@
         @click.stop
       >
         <input
-          v-if="'price_id' in field.preferences"
+          v-if="'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"
+          @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"
@@ -75,29 +82,41 @@
           @blur="save"
         >
         <label
-          v-if="(field.preferences.price || field.preferences.price_id) && (!field.preferences.formula || ('price_id' in field.preferences))"
+          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 }"
           class="absolute -top-1 left-2.5 px-1 h-4"
           style="font-size: 8px"
         >
-          {{ t('price') }}
+          {{ 'payment_link_id' in field.preferences ? t('payment_link') : 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)}"
+            :class="{'underline': !('payment_link_id' in field.preferences)}"
-            @click="delete field.preferences.price_id"
+            @click="[delete field.preferences.price_id, delete field.preferences.payment_link_id]"
           >{{ t('one_off') }}</a>
           <span class="h-2.5 border-l border-base-content mx-1" />
+          <template
+            v-if="field.preferences.price_id"
+          >
+            <a
+              href="#"
+              class="hover:underline"
+              style="font-size: 11px"
+              :class="{'underline': ('price_id' in field.preferences)}"
+              @click="field.preferences.payment_link_id ??= ''"
+            >{{ t('recurrent') }}</a>
+            <span class="h-2.5 border-l border-base-content mx-1" />
+          </template>
           <a
             href="#"
             class="hover:underline"
             style="font-size: 11px"
-            :class="{'underline': ('price_id' in field.preferences)}"
+            :class="{'underline': ('payment_link_id' in field.preferences)}"
-            @click="field.preferences.price_id ??= ''"
+            @click="[delete field.preferences.price_id, field.preferences.payment_link_id ??= '']"
-          >{{ t('recurrent') }}</a>
+          >{{ t('payment_link') }}</a>
         </div>
       </div>
       <div
@@ -194,7 +213,7 @@
             width="18"
           />
           <span class="text-sm">
-            {{ 'price_id' in field.preferences ? t('quantity') : t('formula') }}
+            {{ 'payment_link_id' in field.preferences ? t('quantity') : t('formula') }}
           </span>
         </label>
       </li>