add via link recipients tab

app/javascript/template_builder/builder.vue

@@ -47,7 +47,7 @@
             </span>
           </a>
           <a
-            :href="`/templates/${template.id}/submissions/new`"
+            :href="`/templates/${template.id}/submissions/new?with_link=true`"
             data-turbo-frame="modal"
             class="white-button md:!px-6"
             @click="maybeShowEmptyTemplateAlert"

app/views/submissions/_link_form.html.erb

@@ -0,0 +1,187 @@
+<div>
+  <div class="">
+    <input id="api_key" type="text" value="<%= start_form_url(slug: template.slug) %>" class="input font-mono input-bordered w-full bg-white" autocomplete="off" readonly>
+    <div class="mt-4">
+      <%= render 'shared/clipboard_copy', icon: 'copy', text: start_form_url(slug: template.slug), class: 'base-button w-full block', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy', copied_title: 'Copied' %>
+    </div>
+  </div>
+  <div class="divider uppercase  normal-case mt-5 mb-6 text-neutral-700">Or embed on your website</div>
+  <toggle-visible data-element-ids="[&quot;js_1&quot;,&quot;react_1&quot;,&quot;vue_1&quot;]" class="block relative" data-catalyst="">
+    <ul class="items-center w-full text-sm font-medium text-gray-900 my-4 space-y-2 sm:space-y-0 sm:flex sm:space-x-2">
+      <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
+        <input type="radio" name="option_1" id="js_radio_1" value="js_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden" checked="checked">
+        <label for="js_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
+          <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
+              <path fill="#ffd600" d="M6,42V6h36v36H6z"></path><path fill="#000001" d="M29.538 32.947c.692 1.124 1.444 2.201 3.037 2.201 1.338 0 2.04-.665 2.04-1.585 0-1.101-.726-1.492-2.198-2.133l-.807-.344c-2.329-.988-3.878-2.226-3.878-4.841 0-2.41 1.845-4.244 4.728-4.244 2.053 0 3.528.711 4.592 2.573l-2.514 1.607c-.553-.988-1.151-1.377-2.078-1.377-.946 0-1.545.597-1.545 1.377 0 .964.6 1.354 1.985 1.951l.807.344C36.452 29.645 38 30.839 38 33.523 38 36.415 35.716 38 32.65 38c-2.999 0-4.702-1.505-5.65-3.368L29.538 32.947zM17.952 33.029c.506.906 1.275 1.603 2.381 1.603 1.058 0 1.667-.418 1.667-2.043V22h3.333v11.101c0 3.367-1.953 4.899-4.805 4.899-2.577 0-4.437-1.746-5.195-3.368L17.952 33.029z"></path>
+            </svg>
+          </span>
+          <span>JavaScript</span>
+        </label>
+      </li>
+      <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
+        <input type="radio" name="option_1" id="react_radio_1" value="react_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden">
+        <label for="react_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
+          <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="-11.5 -10.23174 23 20.46348">
+              <circle cx="0" cy="0" r="2.05" fill="#61dafb"></circle>
+              <g stroke="#61dafb" stroke-width="1" fill="none">
+                <ellipse rx="11" ry="4.2"></ellipse>
+                <ellipse rx="11" ry="4.2" transform="rotate(60)"></ellipse>
+                <ellipse rx="11" ry="4.2" transform="rotate(120)"></ellipse>
+              </g>
+            </svg>
+          </span>
+          <span>React</span>
+        </label>
+      </li>
+      <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
+        <input type="radio" name="option_1" id="vue_radio_1" value="vue_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden">
+        <label for="vue_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
+          <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" version="1.1" viewBox="0 0 261.76 226.69"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"></path></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"></path></g></g></svg>
+          </span>
+          <span>Vue</span>
+        </label>
+      </li>
+    </ul>
+  </toggle-visible>
+<div id="js_1" class="block my-4">
+    <div class="mockup-code overflow-hidden pb-0 mt-4">
+      <span class="top-0 right-0 absolute flex">
+        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
+        <clipboard-copy data-text="<script src=&quot;<%= Docuseal::CDN_URL %>/js/form.js&quot;></script>
+
+<docuseal-form data-src=&quot;<%= start_form_url(slug: template.slug) %>&quot;></docuseal-form>
+">
+  <label class="btn btn-ghost text-gray-100">
+    <input type="radio" class="peer hidden">
+    <span class="peer-checked:hidden flex items-center space-x-2">
+      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copy
+      </span>
+    </span>
+    <span class="hidden peer-checked:flex items-center space-x-2">
+      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copied
+      </span>
+    </span>
+  </label>
+</clipboard-copy>
+
+      </span>
+      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #f4bf75">&lt;script </span><span style="color: #6a9fb5">src=</span><span style="color: #90a959">"<%= Docuseal::CDN_URL %>/js/form.js"</span><span style="color: #f4bf75">&gt;&lt;/script&gt;</span>
+
+<span style="color: #f4bf75">&lt;docuseal-form</span> <span style="color: #6a9fb5">data-src=</span><span style="color: #90a959">"<%= start_form_url(slug: template.slug) %>"</span><span style="color: #f4bf75">&gt;</span><span style="color: #f4bf75">&lt;/docuseal-form&gt;</span>
+</code></pre>
+    </div>
+
+  </div>
+<div id="react_1" class="block my-4 hidden">
+    <div class="mockup-code overflow-hidden pb-0 mt-4">
+      <span class="top-0 right-0 absolute flex">
+        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
+        <clipboard-copy data-text="import React from &quot;react&quot;
+import { DocusealForm } from '@docuseal/react'
+
+export function App() {
+  return (
+    <DocusealForm
+      src=&quot;<%= start_form_url(slug: template.slug) %>&quot;
+    />
+  );
+}
+">
+  <label class="btn btn-ghost text-white">
+    <input type="radio" class="peer hidden">
+    <span class="peer-checked:hidden flex items-center space-x-2">
+      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copy
+      </span>
+    </span>
+    <span class="hidden peer-checked:flex items-center space-x-2">
+      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copied
+      </span>
+    </span>
+  </label>
+</clipboard-copy>
+
+      </span>
+      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #aa759f">import</span> <span style="color: #d0d0d0;background-color: #151515">React</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">"</span><span style="color: #90a959">react</span><span style="color: #90a959">"</span>
+<span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">'</span><span style="color: #90a959">@docuseal/react</span><span style="color: #90a959">'</span>
+
+<span style="color: #aa759f">export</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">App</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
+  <span style="color: #aa759f">return </span><span style="color: #d0d0d0">(</span>
+    <span style="color: #d0d0d0">&lt;</span><span style="color: #f4bf75">DocusealForm</span>
+      <span style="color: #6a9fb5">src</span><span style="color: #d0d0d0">=</span><span style="color: #90a959">"<%= start_form_url(slug: template.slug) %>"</span>
+    <span style="color: #d0d0d0">/&gt;</span>
+  <span style="color: #d0d0d0">);</span>
+<span style="color: #d0d0d0">}</span>
+</code></pre>
+    </div>
+
+  </div>
+<div id="vue_1" class="block my-4 hidden">
+    <div class="mockup-code overflow-hidden pb-0 mt-4">
+      <span class="top-0 right-0 absolute flex">
+        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
+        <clipboard-copy data-text="<template>
+  <DocusealForm
+    :src=&quot;'<%= start_form_url(slug: template.slug) %>'&quot;
+  />
+</template>
+
+<script>
+import { DocusealForm } from '@docuseal/vue'
+
+export default {
+  name: 'App',
+  components: {
+    DocusealForm
+  }
+}
+</script>
+">
+  <label class="btn btn-ghost text-white">
+    <input type="radio" class="peer hidden">
+    <span class="peer-checked:hidden flex items-center space-x-2">
+      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copy
+      </span>
+    </span>
+    <span class="hidden peer-checked:flex items-center space-x-2">
+      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copied
+      </span>
+    </span>
+  </label>
+</clipboard-copy>
+
+      </span>
+      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #f4bf75">&lt;template&gt;</span>
+  <span style="color: #f4bf75">&lt;DocusealForm</span>
+    <span style="color: #6a9fb5">:src=</span><span style="color: #90a959">"'<%= start_form_url(slug: template.slug) %>'"</span>
+  <span style="color: #f4bf75">/&gt;</span>
+<span style="color: #f4bf75">&lt;/template&gt;</span>
+
+<span style="color: #f4bf75">&lt;</span><span style="color: #f4bf75">script</span><span style="color: #f4bf75">&gt;</span>
+<span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">'</span><span style="color: #90a959">@docuseal/vue</span><span style="color: #90a959">'</span>
+
+<span style="color: #aa759f">export</span> <span style="color: #aa759f">default</span> <span style="color: #d0d0d0">{</span>
+  <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">'</span><span style="color: #90a959">App</span><span style="color: #90a959">'</span><span style="color: #d0d0d0">,</span>
+  <span style="color: #6a9fb5">components</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
+    <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span>
+  <span style="color: #d0d0d0">}</span>
+<span style="color: #d0d0d0">}</span>
+<span style="color: #f4bf75">&lt;/</span><span style="color: #f4bf75">script</span><span style="color: #f4bf75">&gt;</span>
+</code></pre>
+    </div>
+  </div>
+  <div class="mt-4">
+    <a href="#" class="link text-center block" data-action="click:turbo-modal#close">Close</a>
+  </div>
+</div>

app/views/submissions/new.html.erb

@@ -1,5 +1,5 @@
 <%= render 'shared/turbo_modal', title: params[:selfsign] ? 'Add Recipients' : 'Add New Recipients' do %>
-  <% options = [['via Email', 'email'], ['via Phone', 'phone'], ['Detailed', 'detailed']] %>
+  <% options = [['via Email', 'email'], ['via Phone', 'phone'], %w[Detailed detailed], (Docuseal.multitenant? && params[:with_link] && @template.submitters.to_a.size != 0 ? ['via Link', 'link'] : nil)].compact %>
   <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-4 block">
     <div class="join">
       <% options.each_with_index do |(label, value), index| %>
@@ -22,6 +22,11 @@
     <div id="detailed" class="hidden">
       <%= render 'detailed_form', template: @template %>
     </div>
+    <% if Docuseal.multitenant? && params[:with_link] && @template.submitters.to_a.size != 0 %>
+      <div id="link" class="hidden">
+        <%= render 'link_form', template: @template %>
+      </div>
+    <% end %>
   </div>
   <%= content_for(:modal_extra) %>
 <% end %>

app/views/templates/show.html.erb

@@ -78,7 +78,7 @@
           <p>Send an invitation to fill and complete the form</p>
           <div class="space-y-2 flex flex-col">
             <% if can?(:create, Submission) %>
-              <%= link_to new_template_submission_path(@template), class: 'base-button mt-6', data: { turbo_frame: 'modal' } do %>
+              <%= link_to new_template_submission_path(@template, with_link: true), class: 'base-button mt-6', data: { turbo_frame: 'modal' } do %>
                 <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
                 <span class="mr-1">Send to Recipients</span>
               <% end %>