From 1383a2762b5313f1957d09b3b9ee2f592ce84a26 Mon Sep 17 00:00:00 2001 From: Jano Suchal Date: Sat, 7 Oct 2023 16:03:59 +0200 Subject: [PATCH] Add onboarding modal, refs #331 (#616) * Add onboarding modal, refs #331 --- app/assets/stylesheets/application.css | 1 + app/assets/stylesheets/modal-dialogue.css | 168 ++++++++++++++++++ app/controllers/sessions_controller.rb | 6 +- .../controllers/modal_controller.js | 10 ++ app/views/shared/_flash_messages.erb | 30 +++- db/seeds.rb | 8 +- spec/features/onboarding_spec.rb | 67 +++++++ 7 files changed, 282 insertions(+), 8 deletions(-) create mode 100644 app/assets/stylesheets/modal-dialogue.css create mode 100644 app/javascript/controllers/modal_controller.js create mode 100644 spec/features/onboarding_spec.rb diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index fba004e1..5a173fd5 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -14,6 +14,7 @@ *= require static *= require navody-frontend-fixes *= require or-sr + *= require modal-dialogue *= require_self */ diff --git a/app/assets/stylesheets/modal-dialogue.css b/app/assets/stylesheets/modal-dialogue.css new file mode 100644 index 00000000..b6d22622 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb index 30f72e22..ef33e634 100644 --- a/app/controllers/sessions_controller.rb +++ b/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 diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js new file mode 100644 index 00000000..5b3b4ee8 --- /dev/null +++ b/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(); + } +} diff --git a/app/views/shared/_flash_messages.erb b/app/views/shared/_flash_messages.erb index 6965723f..12ca5bb2 100644 --- a/app/views/shared/_flash_messages.erb +++ b/app/views/shared/_flash_messages.erb @@ -1,11 +1,31 @@ <% if flash[:notice] %> -
-
-
- <%= flash[:notice] %> + <% if flash[:notice] == 'first_time_login' %> +

Vitajte na Návody.Digital

+
+
+ +
+ +
+
+

Vitajte na Návody.Digital 👋

+
+

Kedže ste sa prihlásili prvý krát, odporúčame, aby ste si pozreli krátky návod, v ktorom sa dozviete, ako vám Návody.Digital môžu pomôcť.

+
<%= 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' } %> +
+
+
-
+ <% else %> +
+
+
+ <%= flash[:notice] %> +
+
+
+ <% end %> <% end %> <% if flash[:alert] %>
diff --git a/db/seeds.rb b/db/seeds.rb index 52ae2d71..200628b7 100644 --- a/db/seeds.rb +++ b/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: "

Založenie živnosti: krok po kroku

Zistite, čo treba vybaviť na založenie živnosti.

Založenie živnosti zvyčajne trvá 5 až 10 pracovných dní.

", diff --git a/spec/features/onboarding_spec.rb b/spec/features/onboarding_spec.rb new file mode 100644 index 00000000..c388d0a7 --- /dev/null +++ b/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: '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