feat: APPS-1198 Add a terms of use reminder modal (#107)

* Add changes to new branch to test rails issue * test cookies[:sinai_authenticated_3day] * check set_modal cookie * check set_modal cookie * check set_modal cookie * check set_modal cookie * check set_modal cookie * check set_modal cookie * check set_modal cookie * check set_modal cookie * check set_modal cookie * working cookie * add Cypress tests * update style names
UCLALibrary · Jul 7, 2023 · 91bbe8e · 91bbe8e
1 parent a409f12
commit 91bbe8e
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 10 deletions.
diff --git a/app/assets/stylesheets/theme_sinai/components/_si-terms-of-use-modal.scss b/app/assets/stylesheets/theme_sinai/components/_si-terms-of-use-modal.scss
@@ -0,0 +1,92 @@
+// Terms of Use Modal - appears every 90 days
+
+/* The Modal (background) */
+.si-terms-of-use-modal-block {
+  position: absolute; /* Stay in place */
+  top: 15%;
+  left: 25%;
+  display: none; /* Hidden by default */
+  align-self: center;
+  overflow: auto; /* Enable scroll if needed */
+  max-width: 600px;
+  height: 100%; /* Full height */
+  z-index: 5; /* Sit on top */
+
+  @media (max-width: 767px) {
+    top: 0;
+    left: 0;
+  }
+}
+
+/* Modal Content/Box */
+.si-terms-of-use-modal-group {
+  margin: 4% auto;
+  padding: 1.25rem;
+  width: 92%;
+  background-color: $white;
+  border: 1px solid $sinai-primary-dk;
+}
+
+.si-terms-of-use-modal-title {
+  margin-bottom: 5px;
+  font-size: $text-24;
+  font-family: 'Dosis', sans-serif;
+  line-height: 1.25;
+  align-self: flex-start;
+  color: $sinai-primary-dk;
+  text-transform: uppercase;
+
+  @media (max-width: 800px) {
+    font-size: $text-20;
+  }
+}
+
+.si-terms-of-use-modal-content {
+  margin-bottom: 20px;
+  padding: 5px;
+  font-size: $text-14;
+}
+
+/* The Close Button */
+.si-terms-of-use-modal-button {
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+  margin: auto 25%;
+  padding: 5px;
+  width: 50%;
+  text-align: center;
+  color: $sinai-primary-dk;
+  background: $sinai-secondary;
+  border-style: none;
+  text-shadow: 0 0 0 0;
+
+  @media (max-width: 767px) {
+    margin: 0;
+    width: 100%;
+  }
+}
+
+.close {
+  display: flex;
+  align-self: center;
+  padding: 5px;
+  font-size: 16px;
+  font-family: 'Dosis', sans-serif;
+  font-weight: 500;
+  text-align: center;
+  color: $sinai-primary-dk;
+  background: $sinai-secondary;
+  border: 1px solid $sinai-secondary;
+  opacity: unset;
+  text-shadow: 0 0 0 0;
+  cursor: pointer;
+}
+
+.close:hover {
+  font-size: 16px;
+  color: $sinai-black;
+  opacity: unset;
+}
diff --git a/app/assets/stylesheets/theme_sinai/elements/_si-colors.scss b/app/assets/stylesheets/theme_sinai/elements/_si-colors.scss
@@ -1,5 +1,6 @@
 $sinai-primary: #ab2f0a;
 $sinai-primary-lt: #bb583a;
+$sinai-primary-dk: #87331a;
 $sinai-secondary: #f7f2ea;
 $sinai-secondary-dk: #e2dbcf;
 $sinai-black: #2a2a2a;

diff --git a/app/assets/stylesheets/theme_sinai/theme_sinai.scss b/app/assets/stylesheets/theme_sinai/theme_sinai.scss
@@ -28,3 +28,4 @@
 @import 'theme_sinai/pages/_si-authn-page';
 @import 'theme_sinai/pages/_si-static-page';
 @import 'theme_sinai/components/_si-auth-modal';
+@import 'theme_sinai/components/_si-terms-of-use-modal';
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class ApplicationController < ActionController::Base
-  before_action :display_banner?, :sinai_authn_check, :add_legacy_views, :cors_preflight_check, :set_default_sort
+  before_action :display_banner?, :sinai_authn_check, :add_legacy_views, :cors_preflight_check, :set_default_sort, :display_term_of_use?
   after_action :cors_set_access_control_headers
 
   def add_legacy_views
@@ -95,6 +95,28 @@ def set_auth_cookies
     }
   end
 
+  # TERMS OF USE MODAL
+  def term_of_use_cookie?
+    cookies[:set_modal]
+  end
+
+  def set_term_of_use_cookie
+    cookies[:set_modal] = {
+      value: 'Set this Modal',
+      expires: Time.zone.now + 90.days
+    }
+  end
+
+  def display_term_of_use?
+    if term_of_use_cookie?
+      @term_of_use_modal_option = "none"
+    else
+      @term_of_use_modal_option = "block"
+      set_term_of_use_cookie
+    end
+  end
+  # End Terms of Use Modal
+
   def create_encrypted_string
     cipher.encrypt
     cipher.key = ENV['CIPHER_KEY']

diff --git a/app/views/layouts/blacklight/base.html.erb b/app/views/layouts/blacklight/base.html.erb
@@ -27,12 +27,10 @@
 
       <%= favicon_link_tag 'favicon.ico' %>
 
-    <% if Flipflop.sinai? %>
     <%= stylesheet_link_tag 'https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600&display=swap' %>
     <%= stylesheet_link_tag 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap' %>
-    <% end %>
 
-    <%= stylesheet_link_tag (Flipflop.sinai? ? "sinai" : "ursus"), media: "all" %>
+    <%= stylesheet_link_tag "sinai", media: "all" %>
     <%= javascript_include_tag "application", defer: Rails.env.development? ? false : true %>
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
@@ -45,10 +43,34 @@
     <% end %>
 
     <div class="site-container" <%= schema_org_markup %>>
+      <!-- HEADER -->
       <%= render partial: 'shared/header/header_navbar' %>
       <%= render 'catalog/banners/homepage_banner' %>
 
-      <% if Flipflop.sinai? && controller.controller_name == 'catalog' && controller.action_name == 'show' %>
+      <!-- TERMS OF USE MODAL -->
+      <% if @term_of_use_modal_option == "block" %>
+        <div id="termsOfUseModal" style="display: block" class="si-terms-of-use-modal-block">
+          <!-- Modal content -->
+          <div class="si-terms-of-use-modal-group">
+            <div class='si-terms-of-use-modal-title'>Sinai Manuscripts Digital Library</div>
+
+            <div class='si-terms-of-use-modal-content'>
+              <p>Manuscript images from the Sinai Manuscripts Digital Library should not be used without the express consent of St. Catherine's Monastery of the Sinai. This includes use in published works and social media.</p>
+              <br>
+
+              <p>For more information, see the Terms of Use.</p>
+
+              <p>Click "I AGREE" to continue using the site.</p>
+            </div>
+
+            <button class="si-terms-of-use-modal-button" onclick="closeModal()"><span class="close">I AGREE</span></button>
+          </div>
+        </div>
+      <% end %>
+      <!-- End of Modal -->
+
+      <!-- BODY -->
+      <% if controller.controller_name == 'catalog' && controller.action_name == 'show' %>
 
         <main class="main-content-container container-constrained container-constrained__item-page--sinai">
           <%= content_for(:container_header) %>
@@ -62,8 +84,19 @@
         </main>
       <% end %>
 
+      <!-- FOOTER -->
       <%= render partial: 'shared/footer/footer' %>
       <%= render partial: 'shared/modal' %>
     </div>
   </body>
 </html>
+
+<script>
+  // Get the modal
+  var modal = document.getElementById("termsOfUseModal");
+
+  // When the user clicks on "I Agree", close the modal
+  function closeModal() {
+    modal.style.display = "none";
+  }
+</script>
diff --git a/e2e/cypress/e2e/sinai_homepage.cy.js b/e2e/cypress/e2e/sinai_homepage.cy.js
@@ -1,25 +1,28 @@
 describe('Sinai Homepage', () => {
-  it('Visit the Sinai Homepage', () => {
+  beforeEach(() => {
     cy.visit(Cypress.env('SINAI_BASE_URL'));
+    cy.get('.si-terms-of-use-modal-block');
+    cy.contains('p', 'Manuscript images');
+    cy.get('.si-terms-of-use-modal-button').click();
+  });
+
+  it('Visit the Sinai Homepage', () => {
     cy.percySnapshot();
   });
 
   it('Sinai Manuscripts Digital Library Logo', () => {
-    cy.visit(Cypress.env('SINAI_BASE_URL'));
     cy.get('.site-navbar__logo-block--sinai');
     cy.viewport(1440, 900)
     cy.percySnapshot();
   });
 
   it('Search Component', () => {
-    cy.visit(Cypress.env('SINAI_BASE_URL'));
-    cy.get('.nav').contains('Search').click(); 
+    cy.get('.nav').contains('Search').click();
     cy.url().should('include', 'search_field=all_fields');
   });
 
   // Navbar Links
   it('About Link', () => {
-    cy.visit(Cypress.env('SINAI_BASE_URL'));
     cy.contains('a', 'About');
     cy.get('[href="/about"]').click({ force: true });
     cy.url().should('include', '/about');

diff --git a/e2e/cypress/e2e/sinai_search.cy.js b/e2e/cypress/e2e/sinai_search.cy.js
@@ -2,6 +2,9 @@
 describe('Sinai Search', () => {
   beforeEach(() => {
     cy.visit(Cypress.env('SINAI_BASE_URL') + '/catalog');
+    cy.get('.si-terms-of-use-modal-block');
+    cy.contains('p', 'Manuscript images');
+    cy.get('.si-terms-of-use-modal-button').click();
   });
 
   it('Search Blank', () => {