add shared link qr code

app/controllers/templates_share_link_qr_controller.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class TemplatesShareLinkQrController < ApplicationController
+  load_and_authorize_resource :template
+
+  def show
+    return render :disabled, layout: 'plain' unless @template.shared_link?
+
+    shared_link_url = start_form_url(slug: @template.slug, host: form_link_host)
+
+    @qr_svg_code = RQRCode::QRCode.new(shared_link_url, level: :m).as_svg(viewbox: true)
+
+    @page_size =
+      if TimeUtils.timezone_abbr(current_account.timezone, Time.current.beginning_of_year).in?(TimeUtils::US_TIMEZONES)
+        'Letter'
+      else
+        'A4'
+      end
+
+    render :show, layout: false
+  end
+end

app/views/icons/_printer.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="<%= local_assigns[:class] %>">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" />
+  <path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" />
+  <path d="M7 15a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2l0 -4" />
+</svg>

app/views/icons/_qrcode.html.erb

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="<%= local_assigns[:class] %>">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
+  <path d="M7 17l0 .01" />
+  <path d="M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
+  <path d="M7 7l0 .01" />
+  <path d="M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
+  <path d="M17 7l0 .01" />
+  <path d="M14 14l3 0" />
+  <path d="M20 14l0 .01" />
+  <path d="M14 14l0 3" />
+  <path d="M14 20l3 0" />
+  <path d="M17 17l3 0" />
+  <path d="M20 17l0 3" />
+</svg>

app/views/templates_share_link/show.html.erb

@@ -23,7 +23,12 @@
         </label>
       <% end %>
       <div class="flex gap-2 mt-3">
-        <input id="embedding_url" type="text" value="<%= start_form_url(slug: @template.slug, host: form_link_host) %>" class="base-input w-full" autocomplete="off" readonly>
+        <div class="relative flex-grow">
+          <input id="embedding_url" type="text" value="<%= start_form_url(slug: @template.slug, host: form_link_host) %>" class="base-input w-full pr-10" autocomplete="off" readonly>
+          <a href="<%= template_share_link_qr_path(@template) %>" target="_blank" rel="noopener" class="absolute top-1/2 -translate-y-1/2 right-2 flex items-center justify-center tooltip tooltip-left text-base-content/70 hover:text-base-content bg-white rounded px-1 py-0.5" data-tip="<%= t('qr_code') %>" aria-label="<%= t('qr_code') %>">
+            <%= svg_icon('qrcode', class: 'w-6 h-6') %>
+          </a>
+        </div>
         <check-on-click data-element-id="template_shared_link">
           <%= render 'shared/clipboard_copy', icon: 'copy', text: start_form_url(slug: @template.slug, host: form_link_host), class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
         </check-on-click>

app/views/templates_share_link_qr/_branding.html.erb

@@ -0,0 +1,2 @@
+<%= t('powered_by') %>
+<a href="<%= Docuseal::PRODUCT_URL %>" target="_blank" rel="noopener"><%= Docuseal.product_name %></a>

app/views/templates_share_link_qr/_logo.html.erb

@@ -0,0 +1,2 @@
+<%= render 'shared/logo' %>
+<span><%= Docuseal.product_name %></span>

app/views/templates_share_link_qr/disabled.html.erb

@@ -0,0 +1,10 @@
+<div class="max-w-md space-y-6 mx-auto px-2 mt-12 mb-4">
+  <p class="text-xl font-semibold text-center">
+    <%= t('share_link_is_currently_disabled') %>
+  </p>
+  <% if can?(:update, @template) %>
+    <toggle-submit class="block">
+      <%= button_to button_title(title: t('enable_shared_link'), icon: svg_icon('lock_open', class: 'w-6 h-6')), template_share_link_path(@template), params: { template: { shared_link: true }, redir: template_share_link_qr_path(@template) }, method: :post, data: { turbo: false }, class: 'white-button w-full' %>
+    </toggle-submit>
+  <% end %>
+</div>

app/views/templates_share_link_qr/show.html.erb

@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<% page_width_css = @page_size == 'Letter' ? 8.5 * 96.0 : 210.0 * 96.0 / 25.4 %>
+<% page_height_css = @page_size == 'Letter' ? 11.0 * 96.0 : 297.0 * 96.0 / 25.4 %>
+<% page_width = @page_size == 'Letter' ? '8.5in' : '210mm' %>
+<% page_cqw = ->(px) { format('%.6fcqw', px / page_width_css * 100.0) } %>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= @template.name %></title>
+    <style>
+      @page {
+        size: <%= @page_size %> portrait;
+        margin: 0.5in;
+      }
+
+      html, body {
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        color: #111;
+        background: #faf7f5;
+      }
+
+      .qr-page-wrapper {
+        container-type: size;
+        width: min(100vw, <%= page_width %>);
+        max-width: 100%;
+        aspect-ratio: <%= format('%.6f / %.6f', page_width_css, page_height_css) %>;
+        margin: 24px auto;
+      }
+
+      .qr-page {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: <%= page_cqw.call(72) %>;
+        background: #ffffff;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+      }
+
+      .qr-logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: <%= page_cqw.call(10) %>;
+        font-size: <%= page_cqw.call(20) %>;
+        font-weight: 700;
+        letter-spacing: -0.01em;
+      }
+
+      .qr-logo svg {
+        width: <%= page_cqw.call(32) %>;
+        height: <%= page_cqw.call(32) %>;
+      }
+
+      .qr-logo img {
+        height: <%= page_cqw.call(50) %>;
+      }
+
+      .qr-content {
+        align-self: center;
+        text-align: center;
+        min-width: 0;
+        margin-bottom: <%= page_cqw.call(80) %>;
+      }
+
+      .qr-header {
+        font-size: <%= page_cqw.call(36) %>;
+        font-weight: 700;
+        line-height: 1.2;
+        padding: 0 <%= page_cqw.call(8) %>;
+        margin-bottom: <%= page_cqw.call(48) %>;
+        word-break: break-word;
+      }
+
+      .qr-main svg {
+        display: block;
+        width: <%= page_cqw.call(480) %>;
+        height: auto;
+        max-width: 100%;
+        margin: 0 auto;
+        shape-rendering: crispEdges;
+      }
+
+      .qr-footer {
+        font-size: <%= page_cqw.call(22) %>;
+        line-height: 1.4;
+        padding: 0 <%= page_cqw.call(8) %>;
+        margin-top: <%= page_cqw.call(48) %>;
+        word-break: break-word;
+      }
+
+      .qr-branding {
+        align-self: end;
+        text-align: center;
+        font-size: <%= page_cqw.call(11) %>;
+        color: #6b7280;
+        padding-top: <%= page_cqw.call(24) %>;
+      }
+
+      .qr-branding a {
+        color: #4b5563;
+        text-decoration: none;
+      }
+
+      [contenteditable="true"] {
+        outline: 1px dashed #cbd5e1;
+        outline-offset: 6px;
+        cursor: text;
+        transition: outline-color 0.15s ease;
+      }
+
+      [contenteditable="true"]:hover {
+        outline-color: #94a3b8;
+      }
+
+      [contenteditable="true"]:focus {
+        outline: 1px dashed #291334;
+        outline-offset: 6px;
+      }
+
+      .print-button {
+        position: fixed;
+        right: 24px;
+        top: 24px;
+        z-index: 100;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        min-height: 3rem;
+        height: 3rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        border: 1px solid #291334;
+        border-radius: 1.9rem;
+        background-color: #291334;
+        color: #ffffff;
+        font-size: 1rem;
+        font-weight: 500;
+        line-height: 1em;
+        font-family: inherit;
+        text-transform: none;
+        letter-spacing: normal;
+        cursor: pointer;
+        user-select: none;
+        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
+      }
+
+      .print-button:hover {
+        background-color: #1a0c22;
+        border-color: #1a0c22;
+      }
+
+      .print-button:active {
+        transform: scale(0.97);
+      }
+
+      .print-button:focus-visible {
+        outline: 2px solid #291334;
+        outline-offset: 2px;
+      }
+
+      .print-button svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+
+      @media screen and (max-width: 820px) {
+        .print-button {
+          top: auto;
+          right: 12px;
+          bottom: 12px;
+        }
+      }
+
+      @media print {
+        html, body {
+          background: #ffffff;
+          margin: 0;
+          padding: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        .qr-page-wrapper {
+          width: 100%;
+          height: 100%;
+          aspect-ratio: auto;
+          margin: 0;
+        }
+
+        .qr-page {
+          margin: 0;
+          box-shadow: none;
+          width: 100%;
+          height: 100%;
+          min-height: 100%;
+          padding: 0.25in;
+          page-break-inside: avoid;
+          page-break-after: avoid;
+        }
+
+        .qr-logo {
+          gap: 10px;
+          font-size: 20px;
+        }
+
+        .qr-logo svg {
+          width: 32px;
+          height: 32px;
+        }
+
+        .qr-logo img {
+          height: 50px;
+        }
+
+        .qr-content {
+          margin-bottom: 80px;
+        }
+
+        .qr-header {
+          font-size: 36px;
+          padding: 0 8px;
+          margin-bottom: 48px;
+        }
+
+        .qr-main svg {
+          width: 5in;
+          height: 5in;
+        }
+
+        .qr-footer {
+          font-size: 22px;
+          padding: 0 8px;
+          margin-top: 48px;
+        }
+
+        .qr-branding {
+          font-size: 11px;
+          padding-top: 24px;
+        }
+
+        .print-button {
+          display: none !important;
+        }
+
+        [contenteditable="true"],
+        [contenteditable="true"]:focus {
+          outline: none !important;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="qr-page-wrapper">
+      <div class="qr-page">
+        <div class="qr-logo">
+          <%= render 'logo' %>
+        </div>
+        <div class="qr-content">
+          <div class="qr-header" contenteditable="true" spellcheck="false"><%= @template.name %></div>
+          <div class="qr-main">
+            <%== @qr_svg_code %>
+          </div>
+          <div class="qr-footer" contenteditable="true" spellcheck="false">
+            <%= t('scan_the_qr_code_above_with_your_phone_camera_to_open_and_sign_this_document') %>
+          </div>
+        </div>
+        <div class="qr-branding">
+          <%= render 'branding' %>
+        </div>
+      </div>
+    </div>
+    <button type="button" id="qr-print-button" class="print-button">
+      <%= svg_icon('printer') %>
+      <span><%= t('print') %></span>
+    </button>
+    <script nonce="<%= content_security_policy_nonce %>">
+      document.getElementById('qr-print-button').addEventListener('click', function () {
+        window.print();
+      });
+    </script>
+  </body>
+</html>

config/locales/i18n.yml

@@ -367,6 +367,9 @@ en: &en
   sign_out: Sign out
   page_number: 'Page %{number}'
   powered_by: Powered by
+  qr_code: QR Code
+  print: Print
+  scan_the_qr_code_above_with_your_phone_camera_to_open_and_sign_this_document: Scan the QR code above with your phone camera to open and sign this document.
   count_documents_signed_with_html: '<b>%{count}</b> documents signed with'
   storage: Storage
   notifications: Notifications
@@ -1406,6 +1409,9 @@ es: &es
   sign_out: Cerrar sesión
   page_number: 'Página %{number}'
   powered_by: Desarrollado por
+  qr_code: Código QR
+  print: Imprimir
+  scan_the_qr_code_above_with_your_phone_camera_to_open_and_sign_this_document: Escanea el código QR de arriba con la cámara de tu teléfono para abrir y firmar este documento.
   count_documents_signed_with_html: '<b>%{count}</b> documentos firmados con'
   storage: Almacenamiento
   notifications: Notificaciones
@@ -2442,6 +2448,9 @@ it: &it
   sign_out: Esci
   page_number: 'Pagina %{number}'
   powered_by: Fornito da
+  qr_code: Codice QR
+  print: Stampa
+  scan_the_qr_code_above_with_your_phone_camera_to_open_and_sign_this_document: Scansiona il codice QR qui sopra con la fotocamera del tuo telefono per aprire e firmare questo documento.
   count_documents_signed_with_html: '<b>%{count}</b> documenti firmati con'
   storage: Archiviazione
   notifications: Notifiche
@@ -3479,6 +3488,9 @@ fr: &fr
   sign_out: Se déconnecter
   page_number: Page %{number}
   powered_by: Propulsé par
+  qr_code: Code QR
+  print: Imprimer
+  scan_the_qr_code_above_with_your_phone_camera_to_open_and_sign_this_document: Scannez le code QR ci-dessus avec l'appareil photo de votre téléphone pour ouvrir et signer ce document.
   count_documents_signed_with_html: "<b>%{count}</b> documents signés avec"
   storage: Stockage
   notifications: Notifications
@@ -4512,6 +4524,9 @@ pt: &pt
   sign_out: Sair
   page_number: 'Página %{number}'
   powered_by: Desenvolvido por
+  qr_code: Código QR
+  print: Imprimir
+  scan_the_qr_code_above_with_your_phone_camera_to_open_and_sign_this_document: Escaneie o código QR acima com a câmera do seu telefone para abrir e assinar este documento.
   count_documents_signed_with_html: '<b>%{count}</b> documentos assinados com'
   storage: Armazenamento
   notifications: Notificações
@@ -5548,6 +5563,9 @@ de: &de
   sign_out: Abmelden
   page_number: 'Seite %{number}'
   powered_by: Bereitgestellt von
+  qr_code: QR-Code
+  print: Drucken
+  scan_the_qr_code_above_with_your_phone_camera_to_open_and_sign_this_document: Scannen Sie den QR-Code oben mit Ihrer Handykamera, um dieses Dokument zu öffnen und zu unterzeichnen.
   count_documents_signed_with_html: '<b>%{count}</b> Dokumente signiert mit'
   storage: Speicher
   notifications: Benachrichtigungen
@@ -6985,6 +7003,9 @@ nl: &nl
   sign_out: Afmelden
   page_number: Pagina %{number}
   powered_by: Aangedreven door
+  qr_code: QR-code
+  print: Afdrukken
+  scan_the_qr_code_above_with_your_phone_camera_to_open_and_sign_this_document: Scan de bovenstaande QR-code met je telefooncamera om dit document te openen en te ondertekenen.
   count_documents_signed_with_html: "<b>%{count}</b> documenten ondertekend met"
   storage: Opslag
   notifications: Meldingen

config/routes.rb

@@ -108,6 +108,7 @@ Rails.application.routes.draw do
     resource :code_modal, only: %i[show], controller: 'templates_code_modal'
     resource :preferences, only: %i[show create destroy], controller: 'templates_preferences'
     resource :share_link, only: %i[show create], controller: 'templates_share_link'
+    resource :share_link_qr, only: %i[show], controller: 'templates_share_link_qr'
     resources :recipients, only: %i[create], controller: 'templates_recipients'
     resources :prefillable_fields, only: %i[create], controller: 'templates_prefillable_fields'
     resources :submissions_export, only: %i[index new]