Add the promotion screen for Sequence editor (OVE) [SCI-8968] (#6007)

app/assets/javascripts/sitewide/iframe_modal.js

@@ -13,6 +13,12 @@ $(document).on('turbolinks:load', function() {
     iFrameModal.dispatchEvent(new Event('shown'));
   };
 
+  iFrameModalFrame.addEventListener('load', () => {
+    iFrameModalFrame.contentWindow.document.querySelector('.iframe-close').addEventListener('click', function() {
+      iFrameModal.dispatchEvent(new Event('hide'))
+    });
+  });
+
   iFrameModal.addEventListener('hide', () => {
     iFrameModal.classList.add('hidden');
     iFrameModalFrame.removeAttribute('src');

app/controllers/gene_sequence_assets_controller.rb

@@ -13,6 +13,7 @@ class GeneSequenceAssetsController < ApplicationController
   before_action :check_manage_permission, only: %i(new update create)
 
   def new
+    @ove_enabled = OpenVectorEditorService.enabled?
     render :edit, layout: false
   end
 

app/views/gene_sequence_assets/_promo.html.erb

@@ -0,0 +1,23 @@
+<div class="ove-promo-wrapper flex flex-col h-screen">
+  <div class="flex justify-end border-0 border-b-[1px] border-solid border-[color:var(--sn-sleepy-grey)]">
+    <a class="btn btn-light icon-btn iframe-close">
+      <i class="sn-icon sn-icon-close"></i>
+    </a>
+  </div>
+  <div class="promo-container w-full h-full flex justify-center items-center gap-28">
+    <%= image_tag "ove/promo.png", class: "h-2/3" %>
+    <div class="max-w-sm">
+      <h1 class="text-3xl font-semibold text-sn-blue">
+        <%= t "open_vector_editor.promo.title" %>
+      </h1>
+      <ul class="text-xl font-normal text-sn-blue">
+        <li><%= t "open_vector_editor.promo.bullet_1" %></li>
+        <li><%= t "open_vector_editor.promo.bullet_2" %></li>
+        <li><%= t "open_vector_editor.promo.bullet_3" %></li>
+      </ul>
+      <div class="flex justify-center">
+        <%= link_to t("open_vector_editor.promo.button"), Constants::OPEN_VECTOR_EDITOR_PROMO_URL,  class: "btn btn-lg bg-sn-blue text-white w-fit", target: :_blank %>
+      </div>
+    </div>
+  </div>
+</div>

app/views/gene_sequence_assets/edit.html.erb

@@ -24,7 +24,7 @@
       <%= javascript_include_tag 'open_vector_editor' %>
       <%= javascript_include_tag 'vue_components_open_vector_editor' %>
     <% else %>
-      <%# TODO render promo %>
+      <%= render partial: "promo", locals: {active: :label}, formats: :html %>
     <% end %>
   </body>
 </html>

config/initializers/constants.rb

@@ -205,6 +205,7 @@ class Constants
   TUTORIALS_URL = ENV.fetch('VIDEO_TUTORIALS_URL', "#{HTTP}goo.gl/YH3fXA").freeze
   SUPPORT_URL = ENV.fetch('KNOWLEDGE_CENTER_URL', 'https://scinote-3850750.hs-sites.com/en/knowledge').freeze
   FREE_TRIAL_URL = 'https://www.scinote.net/free-trial/?utm_source=SciNoteShare&utm_medium=FreeTrialButton&utm_campaign=Q3_2023'.freeze
+  OPEN_VECTOR_EDITOR_PROMO_URL = ''.freeze
   # Default user picture avatar
   DEFAULT_AVATAR_URL = '/images/:style/missing.svg'.freeze
 

config/locales/en.yml

@@ -3710,6 +3710,12 @@ en:
     trial_expiration_warning_html:
       one: "Your Sequence editor trial expires in %{count} day. <a href='mailto:support@scinote.net'> Contact SciNote for more information.</a>"
       other: "Your Sequence editor trial expires in %{count} days. <a href='mailto:support@scinote.net'> Contact SciNote for more information.</a>"
+    promo:
+      title: "Manage protein sequences in SciNote:"
+      bullet_1: "Import"
+      bullet_2: "Visualize"
+      bullet_3: "Annotate"
+      button: "Try Sequence editor"
   pdf_preview:
     fit_to_screen: 'Fit to screen'
     pages:

config/tailwind.config.js

@@ -20,7 +20,8 @@ module.exports = {
       colors: {
         transparent: 'transparent',
         current: 'currentColor',
-        'brand-warning': '#f0ad4e'
+        'brand-warning': '#f0ad4e',
+        'sn-blue': '#104DA9'
       }
     }
   },