Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Open and close Zendesk widget via a link in the footer
Javascript in this commit - shows the link when the support team come online, or if they are already online - hides the link when the team go or are offline - opens the chat popup when the link is clicked default (no-JS) behaviour is not to show the link to the widget.
- Loading branch information
1 parent
4da74c4
commit 19d61e8
Showing
9 changed files
with
194 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| function Webchat () { | ||
| this.container = document.getElementById('app-web-chat') | ||
|
|
||
| this.configureWidget() | ||
| this.setupElements() | ||
| this.addButtonListener() | ||
| this.addStatusChangeListener() | ||
| } | ||
|
|
||
| Webchat.prototype.configureWidget = function () { | ||
| window.zESettings = { | ||
| webWidget: { | ||
| chat: { | ||
| suppress: true | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| Webchat.prototype.setupElements = function () { | ||
| this.enabledContainer = document.createElement('span') | ||
| this.enabledContainer.className = 'moj-hidden' | ||
|
|
||
| this.defaultContainer = document.querySelector('.app-web-chat__unavailable') | ||
|
|
||
| this.button = document.createElement('a') | ||
| this.button.href = '#' | ||
| this.button.className = 'govuk-link govuk-footer__link app-web-chat__button' | ||
| this.button.innerHTML = 'Speak to an advisor now (opens in new window)' | ||
| this.enabledContainer.append(this.button) | ||
|
|
||
| this.disabledContainer = document.createElement('span') | ||
| this.disabledContainer.className = 'app-web-chat__offline moj-hidden' | ||
| this.disabledContainer.innerHTML = 'Available Monday to Friday, 10am to midday (except public holidays).' | ||
|
|
||
| this.container.append(this.enabledContainer) | ||
| this.container.append(this.disabledContainer) | ||
| } | ||
|
|
||
| Webchat.prototype.addButtonListener = function () { | ||
| this.button.addEventListener('click', function (e) { | ||
| e.preventDefault() | ||
|
|
||
| zE('webWidget', 'popout') | ||
| }, false) | ||
| } | ||
|
|
||
| Webchat.prototype.addStatusChangeListener = function () { | ||
| zE('webWidget:on', 'chat:status', function (status) { | ||
| this.defaultContainer.classList.add('moj-hidden') | ||
|
|
||
| if (status === 'online') { | ||
| this.enableChat() | ||
| } else { | ||
| this.disableChat() | ||
| } | ||
| }.bind(this)) | ||
| } | ||
|
|
||
| Webchat.prototype.enableChat = function () { | ||
| this.disabledContainer.classList.add('moj-hidden') | ||
| this.enabledContainer.classList.remove('moj-hidden') | ||
| } | ||
|
|
||
| Webchat.prototype.disableChat = function () { | ||
| this.disabledContainer.classList.remove('moj-hidden') | ||
| this.enabledContainer.classList.add('moj-hidden') | ||
| } | ||
|
|
||
| const webchat = () => new Webchat() | ||
| export default webchat |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| window.zendeskPopupOpen = false | ||
|
|
||
| window.setZendeskStatus = function (status) { | ||
| const statusChangeEvent = new CustomEvent('setZendeskStubStatus', { detail: status }) | ||
| document.body.dispatchEvent(statusChangeEvent) | ||
| } | ||
|
|
||
| window.zE = function (scope, command, callback = null) { | ||
| if (scope === 'webWidget' && command === 'popout') { | ||
| window.zendeskPopupOpen = true | ||
| } else if (scope === 'webWidget:on' && command === 'chat:status') { | ||
| document.body.addEventListener('setZendeskStubStatus', function (e) { | ||
| callback(e.detail) | ||
| }) | ||
| } else { | ||
| throw Error('Unexpected Zendesk API function call') | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,9 @@ | ||
| <script | ||
| id="ze-snippet" | ||
| nonce="<%= request.content_security_policy_nonce %>" | ||
| src=https://static.zdassets.com/ekr/snippet.js?key=904d04ae-8027-4ebb-ad39-d0e9f68d6ab1> | ||
| </script> | ||
| <% if Rails.env.test? %> | ||
| <%= javascript_pack_tag('zendesk-stub') %> | ||
| <% else %> | ||
| <script | ||
| id="ze-snippet" | ||
| nonce="<%= request.content_security_policy_nonce %>" | ||
| src=https://static.zdassets.com/ekr/snippet.js?key=904d04ae-8027-4ebb-ad39-d0e9f68d6ab1> | ||
| </script> | ||
| <% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,7 +35,9 @@ | |
| ], | ||
| "globals": [ | ||
| "$", | ||
| "history" | ||
| "history", | ||
| "zE", | ||
| "CustomEvent" | ||
| ] | ||
| }, | ||
| "stylelint": { | ||
|
|
||
58 changes: 58 additions & 0 deletions
58
spec/system/provider_interface/provider_uses_webchat_spec.rb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| require 'rails_helper' | ||
|
|
||
| RSpec.feature 'Provider uses webchat' do | ||
| include DfESignInHelpers | ||
|
|
||
| scenario 'controlling the widget via a link in the footer', js: true do | ||
| given_i_am_a_provider_user | ||
| and_i_sign_in_to_the_provider_interface | ||
| when_i_visit_the_provider_interface | ||
| and_there_is_no_support_agent_online | ||
|
|
||
| then_i_should_see_no_link_in_the_footer | ||
|
|
||
| when_a_support_agent_comes_online | ||
| then_i_should_see_a_link_in_the_footer | ||
| and_when_i_click_the_link_i_see_a_popup | ||
|
|
||
| when_the_support_agent_goes_offline | ||
| then_i_should_see_no_link_in_the_footer | ||
| end | ||
|
|
||
| def given_i_am_a_provider_user | ||
| provider_user = create(:provider_user) | ||
| user_exists_in_dfe_sign_in(email_address: provider_user.email_address) | ||
| end | ||
|
|
||
| def and_i_sign_in_to_the_provider_interface | ||
| provider_signs_in_using_dfe_sign_in | ||
| end | ||
|
|
||
| def when_i_visit_the_provider_interface | ||
| visit provider_interface_applications_path | ||
| end | ||
|
|
||
| def and_there_is_no_support_agent_online; end | ||
|
|
||
| def then_i_should_see_no_link_in_the_footer | ||
| expect(page).not_to have_content('speak to an advisor now') | ||
| end | ||
|
|
||
| def when_a_support_agent_comes_online | ||
| page.evaluate_script('setZendeskStatus("online")') | ||
| end | ||
|
|
||
| def then_i_should_see_a_link_in_the_footer | ||
| expect(page).to have_content('speak to an advisor now') | ||
| end | ||
|
|
||
| def and_when_i_click_the_link_i_see_a_popup | ||
| click_link 'speak to an advisor now' | ||
|
|
||
| expect(page.evaluate_script('window.zendeskPopupOpen')).to eq true | ||
| end | ||
|
|
||
| def when_the_support_agent_goes_offline | ||
| page.evaluate_script('setZendeskStatus("offline")') | ||
| end | ||
| end |