Add onboarding modal, refs #331 (#616)

* Add onboarding modal, refs #331

app/assets/stylesheets/application.css

@@ -14,6 +14,7 @@
  *= require static
  *= require navody-frontend-fixes
  *= require or-sr
+ *= require modal-dialogue
  *= require_self
  */
 

app/assets/stylesheets/modal-dialogue.css

@@ -0,0 +1,168 @@
+.govuk-modal-dialogue__continue,
+.govuk-modal-dialogue__cancel {
+    margin-bottom: 0;
+}
+
+.govuk-modal-dialogue__continue {
+    margin-top: 10px;
+}
+
+.govuk-modal-dialogue__cancel {
+    display: block;
+    margin-top: 15px;
+    text-align: center;
+}
+
+@media (min-width: 40.0625em) {
+    .govuk-modal-dialogue__continue {
+        margin-top: 0;
+    }
+    .govuk-modal-dialogue__cancel {
+        display: inline-block;
+        margin: 9px 0 0 15px;
+    }
+}
+
+.govuk-modal-dialogue,
+.govuk-modal-dialogue__backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+}
+
+.govuk-modal-dialogue {
+    display: none;
+    z-index: 1100;
+}
+
+.govuk-modal-dialogue--open {
+    display: table;
+    display: flex;
+    flex-direction: column;
+}
+
+.govuk-modal-dialogue__wrapper {
+    box-sizing: border-box;
+    display: table-cell;
+    display: flex;
+    height: inherit;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    overflow-y: auto;
+    vertical-align: middle;
+    align-items: center;
+}
+
+@media (min-width: 40.0625em) {
+    .govuk-modal-dialogue__wrapper {
+        padding-top: 40px;
+    }
+}
+
+@media (min-width: 40.0625em) {
+    .govuk-modal-dialogue__wrapper {
+        padding-bottom: 40px;
+    }
+}
+
+.govuk-modal-dialogue__box {
+    box-sizing: border-box;
+    display: block;
+    position: relative;
+    z-index: 1100;
+    width: 90%;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0;
+    border: 3px solid #0b0c0c;
+    background: #ffffff;
+}
+
+.govuk-modal-dialogue__box:focus {
+    outline: 3px solid #ffdd00;
+}
+
+.govuk-modal-dialogue__box::backdrop {
+    display: none;
+}
+
+.govuk-modal-dialogue__header {
+    margin-bottom: 15px;
+    padding-bottom: 3px;
+    color: #ffffff;
+    background-color: #0b0c0c;
+    text-align: right;
+}
+
+.govuk-modal-dialogue__header:after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+@media (min-width: 40.0625em) {
+    .govuk-modal-dialogue__header {
+        margin-bottom: 25px;
+    }
+}
+
+.govuk-modal-dialogue__content {
+    padding: 20px;
+    padding-top: 0;
+}
+
+@media (min-width: 40.0625em) {
+    .govuk-modal-dialogue__content {
+        padding: 30px;
+    }
+}
+
+.govuk-modal-dialogue__backdrop {
+    opacity: .8;
+    background: #0b0c0c;
+    pointer-events: none;
+    touch-action: none;
+}
+
+.govuk-modal-dialogue__close {
+    display: block;
+    width: auto;
+    min-width: 44px;
+    margin: 0;
+    padding: 2px 5px;
+    float: right;
+    color: #ffffff;
+    background-color: #0b0c0c;
+    box-shadow: none !important;
+    font-size: 36px;
+    font-size: 2.25rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.govuk-modal-dialogue__close:hover {
+    color: #0b0c0c;
+    background-color: #ffdd00;
+}
+
+.govuk-modal-dialogue__close:active {
+    top: 0;
+}
+
+@media (min-width: 40.0625em) {
+    .govuk-modal-dialogue__content {
+        padding-top: 0;
+    }
+    .govuk-modal-dialogue__box {
+        width: 83.22497%;
+    }
+}
+
+@media (min-width: 48.0625em) {
+    .govuk-modal-dialogue__box {
+        width: 640px;
+    }
+}

app/controllers/sessions_controller.rb

@@ -22,6 +22,8 @@ def create
 
     user = User.find_by('lower(email) = lower(?)', auth_email) || User.create!(email: auth_email)
 
+    notice = user.previously_new_record? ? 'first_time_login' : 'Prihlásenie úspešné. Vitajte!'
+
     if eid_identity_approval?
       user.update!(eid_sub: eid_sub_from_auth)
     end
@@ -31,9 +33,9 @@ def create
     end
 
     session[:user_id] = user.id
-    redirect_to after_login_redirect_path, notice: 'Prihlásenie úspešné. Vitajte!'
-  end
 
+    redirect_to after_login_redirect_path, notice: notice
+  end
   def magic_link_info
     @email = params[:email]
   end

app/javascript/controllers/modal_controller.js

@@ -0,0 +1,10 @@
+import {Controller} from 'stimulus';
+
+export default class extends Controller {
+    static targets = ["modal"]
+
+    close(event) {
+        event.preventDefault();
+        this.modalTarget.remove();
+    }
+}

app/views/shared/_flash_messages.erb

@@ -1,11 +1,31 @@
 <% if flash[:notice] %>
-  <div class="govuk-!-padding-top-6 govuk-!-padding-bottom-6">
-    <div class="govuk-panel govuk-panel--notice">
-      <div class="govuk-panel__body govuk-!-font-size-19 govuk-!-font-weight-bold">
-        <%= flash[:notice] %>
+  <% if flash[:notice] == 'first_time_login' %>
+    <h1>Vitajte na Návody.Digital</h1>
+    <div class="govuk-modal-dialogue govuk-modal-dialogue--open" data-module="govuk-modal-dialogue" data-controller="modal" data-modal-target="modal">
+      <div class="govuk-modal-dialogue__wrapper">
+        <dialog aria-describedby="welcome-description" aria-labelledby="welcome-title" class="govuk-modal-dialogue__box" id="welcome" role="alertdialog" tabindex="0" open="">
+          <div class="govuk-modal-dialogue__header">
+            <button aria-label="Close modal dialogue" class="govuk-button govuk-modal-dialogue__close" data-action="modal#close" data-module="govuk-button" type="button">×</button>
+          </div>
+          <div class="govuk-modal-dialogue__content">
+            <h2 class="govuk-heading-l" id="welcome-title">Vitajte na Návody.Digital 👋</h2>
+            <div class="govuk-modal-dialogue__description" id="welcome-description">
+              <p class="govuk-body-l">Kedže ste sa prihlásili <strong>prvý krát</strong>, odporúčame, aby ste si <strong>pozreli krátky návod</strong>, v ktorom sa dozviete, ako vám Návody.Digital môžu pomôcť.</p>
+            </div><%= link_to "Áno, chcem vedieť viac", page_path('vitajte'), class: "govuk-button govuk-modal-dialogue__continue", data: { turbolinks: false } %> <%= link_to "Nie, ďakujem", "#", class: "govuk-modal-dialogue__cancel govuk-body govuk-link--no-visited-state", data: { action: 'modal#close' } %>
+          </div>
+        </dialog>
       </div>
+      <div class="govuk-modal-dialogue__backdrop"></div>
     </div>
-  </div>
+  <% else %>
+    <div class="govuk-!-padding-top-6 govuk-!-padding-bottom-6">
+      <div class="govuk-panel govuk-panel--notice">
+        <div class="govuk-panel__body govuk-!-font-size-19 govuk-!-font-weight-bold">
+          <%= flash[:notice] %>
+        </div>
+      </div>
+    </div>
+  <% end %>
 <% end %>
 <% if flash[:alert] %>
   <div class="govuk-!-padding-top-6 govuk-!-padding-bottom-6">

db/seeds.rb

@@ -19,11 +19,17 @@
   is_faq: false
 )
 
+Page.find_or_create_by!(
+  title: 'Vitajte na Návody.Digital',
+  content: 'Vitajte na Návody.Digital. Toto je onboarding stránka.',
+  slug: 'vitajte',
+  is_faq: false
+)
+
 journey = Journey.find_or_create_by!(
   position: 1,
   title: "Založenie živnosti",
   slug: "zalozenie-zivnosti",
-  short_description: "empty",
   description: "<h1>Založenie živnosti: krok po kroku</h1>
 <p>Zistite, čo treba vybaviť na založenie živnosti.</p>
 <p>Založenie živnosti zvyčajne trvá 5 až 10 pracovných dní.</p>",

spec/features/onboarding_spec.rb

@@ -0,0 +1,67 @@
+require 'rails_helper'
+
+RSpec.feature "Sessions" do
+  before(:each) do
+    # https://stackoverflow.com/questions/598933/how-do-i-change-the-default-www-example-com-domain-for-testing-in-rails
+    default_url_options[:host] = "localhost:3000"
+    Capybara.default_host = "http://localhost:3000"
+  end
+
+  scenario 'As a visitor I want to see onboarding after first login (magic link path)' do
+    OmniAuth.config.test_mode = false
+
+    visit new_session_path
+
+    within 'form#login-email' do
+      fill_in :email, with: '[email protected]'
+    end
+
+    clear_mail_deliveries
+
+    click_on 'Prihlásiť sa e-mailom'
+    perform_enqueued_jobs
+
+    expect(ActionMailer::Base.deliveries.size).to eq 1
+
+    visit link_in_last_email
+
+    expect(page).to have_text('Vitajte na Návody.Digital')
+  end
+
+  scenario 'As a visitor I want to see onboarding after first login (google login path)' do
+    OmniAuth.config.test_mode = true
+    OmniAuth.config.add_mock(:google_oauth2, {
+      provider: 'google_oauth2',
+      info: {
+        email: '[email protected]'
+      }
+    })
+
+    visit root_path
+    click_link 'Prihlásiť'
+    click_on 'Prihlásiť sa cez Google'
+
+    expect(page).to have_text('Vitajte na Návody.Digital')
+  end
+
+  scenario 'As a visitor I dont want to see onboarding after next login' do
+    OmniAuth.config.test_mode = true
+    OmniAuth.config.add_mock(:google_oauth2, {
+      provider: 'google_oauth2',
+      info: {
+        email: '[email protected]'
+      }
+    })
+
+    visit root_path
+    click_link 'Prihlásiť'
+    click_on 'Prihlásiť sa cez Google'
+
+    click_on 'Odhlásiť'
+
+    click_link 'Prihlásiť'
+    click_on 'Prihlásiť sa cez Google'
+
+    expect(page).not_to have_text('Vitajte na Návody.Digital')
+  end
+end