Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add onboarding modal, refs #331 #616

Merged
merged 4 commits into from
Oct 7, 2023
Merged

Add onboarding modal, refs #331 #616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5634e3f
Add onboarding modal, refs #331
jsuchal Oct 7, 2023
f20eb70
Minor wording tuning
jsuchal Oct 7, 2023
87c8069
Be consistent
jsuchal Oct 7, 2023
fe38c79
Merge branch 'master' into onboarding-modal
jsuchal Oct 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
*= require static
*= require navody-frontend-fixes
*= require or-sr
*= require modal-dialogue
*= require_self
*/

Expand Down
168 changes: 168 additions & 0 deletions app/assets/stylesheets/modal-dialogue.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
6 changes: 4 additions & 2 deletions app/controllers/sessions_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
10 changes: 10 additions & 0 deletions app/javascript/controllers/modal_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {Controller} from 'stimulus';

export default class extends Controller {
static targets = ["modal"]

close(event) {
event.preventDefault();
this.modalTarget.remove();
}
}
30 changes: 25 additions & 5 deletions app/views/shared/_flash_messages.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
8 changes: 7 additions & 1 deletion db/seeds.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>",
Expand Down
67 changes: 67 additions & 0 deletions spec/features/onboarding_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: 'foo@bar.com'
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: 'foo@bar.com'
}
})

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: 'foo@bar.com'
}
})

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
Loading