-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #772 from City-of-Helsinki/UHF-10161-telia-ace-script
UHF-10161: Create leijuke script for Telia ACE chat
- Loading branch information
Showing
11 changed files
with
257 additions
and
18 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,194 @@ | ||
| // eslint-disable-next-line func-names | ||
| (function (Drupal, drupalSettings) { | ||
| class TeliaAceLeijuke { | ||
| constructor(teliaAceData) { | ||
| this.static = { | ||
| chatId: teliaAceData.chat_id, | ||
| selector: `leijuke_${teliaAceData.chat_id}`, | ||
| chatTitle: teliaAceData.chat_title, | ||
| scriptUrl: teliaAceData.script_url, | ||
| scriptSri: teliaAceData.script_sri | ||
| }; | ||
| this.state = { | ||
| cookies: this.cookieCheck(), | ||
| chatLoading: false, | ||
| chatLoaded: false, | ||
| chatOpened: false, | ||
| busy: false | ||
| }; | ||
| } | ||
|
|
||
| // eslint-disable-next-line class-methods-use-this | ||
| cookieCheck() { | ||
| return Drupal.eu_cookie_compliance.hasAgreedWithCategory('chat'); | ||
| } | ||
|
|
||
| // eslint-disable-next-line class-methods-use-this | ||
| cookieSet() { | ||
| if (Drupal.eu_cookie_compliance.hasAgreedWithCategory('chat')) return; | ||
| Drupal.eu_cookie_compliance.setAcceptedCategories([ ...Drupal.eu_cookie_compliance.getAcceptedCategories(), 'chat' ]); | ||
| } | ||
|
|
||
| init() { | ||
| if (this.state.cookies) { | ||
| // Cookies already set so chat assets can be loaded. | ||
| this.loadChat(); | ||
| } | ||
|
|
||
| this.initWrapper(); | ||
| this.render(); | ||
| } | ||
|
|
||
| loadChat() { | ||
| const { scriptUrl, scriptSri } = this.static; | ||
| const leijuke = this; | ||
| const chatScript = document.createElement('script'); | ||
| chatScript.src = scriptUrl; | ||
| chatScript.type = 'text/javascript'; | ||
| chatScript.setAttribute('async', ''); | ||
|
|
||
| if (scriptSri) { | ||
| chatScript.integrity = scriptSri; | ||
| chatScript.crossOrigin = 'anonymous'; | ||
| } | ||
|
|
||
| // eslint-disable-next-line func-names | ||
| chatScript.onload = function() { | ||
| leijuke.loaded(); | ||
| }; | ||
|
|
||
| // Insert chatScript into head | ||
| const head = document.querySelector('head'); | ||
| head.appendChild(chatScript); | ||
| this.state.chatLoading = true; | ||
| } | ||
|
|
||
| loaded() { | ||
| this.state = { | ||
| ...this.state, | ||
| chatLoaded: true, | ||
| }; | ||
| this.openChat(); | ||
| this.render(); | ||
| } | ||
|
|
||
| initWrapper() { | ||
| let teliaAceLeijukeWrapper = document.getElementById('telia-ace-leijuke'); | ||
| if (!teliaAceLeijukeWrapper) { | ||
| teliaAceLeijukeWrapper = document.createElement('aside'); | ||
| teliaAceLeijukeWrapper.id = 'telia-ace-leijuke'; | ||
| document.body.append(teliaAceLeijukeWrapper); | ||
| } | ||
|
|
||
| const teliaAceLeijukeInstance = document.createElement('button'); | ||
| teliaAceLeijukeInstance.id = this.static.selector; | ||
| teliaAceLeijukeInstance.classList.add('chat-leijuke'); | ||
| teliaAceLeijukeInstance.classList.add('telia-chat-leijuke'); | ||
|
|
||
| teliaAceLeijukeWrapper.append(teliaAceLeijukeInstance); | ||
|
|
||
| this.prepButton(teliaAceLeijukeInstance); | ||
| } | ||
|
|
||
| prepButton(button) { | ||
|
|
||
| button.addEventListener('click', () => { | ||
|
|
||
| // Debounce button. | ||
| if (this.state.busy) { | ||
| return; | ||
| } | ||
| this.state = { | ||
| ...this.state, | ||
| busy: true, | ||
| }; | ||
|
|
||
| // If chat was loaded, cookies are ok. | ||
| if (this.state.chatLoaded) { | ||
| this.openChat(true); | ||
| return; | ||
| } | ||
|
|
||
| if (!this.state.cookies) { | ||
| // Implicitly allow chat cookies if clicking Leijuke. | ||
| this.cookieSet(); | ||
| } | ||
|
|
||
| this.state = { | ||
| ...this.state, | ||
| cookies: this.cookieCheck() | ||
| }; | ||
|
|
||
| // If the cookieCheck returns false, it means they could not be set | ||
| // implicitly, which means something is wrong in the config. | ||
| if (this.state.cookies) { | ||
| this.loadChat(); | ||
| this.openChat(true); | ||
| } | ||
|
|
||
| }); | ||
| } | ||
|
|
||
| openChat(openWidget) { | ||
| const leijuke = this; | ||
|
|
||
| const teliaAceWidgetInitialized = setInterval(() => { | ||
| if(typeof window.humany !== 'undefined' && typeof window.humany.widgets !== 'undefined' && window.humany.widgets.find(leijuke.static.chatId)){ | ||
| if (openWidget) { | ||
| const myWidget = window.humany.widgets.find(leijuke.static.chatId); | ||
| myWidget.activate(); | ||
| myWidget.invoke('show'); | ||
| } | ||
| clearInterval(teliaAceWidgetInitialized); | ||
| leijuke.state = { | ||
| ...leijuke.state, | ||
| chatLoading: false, | ||
| chatOpened: true, | ||
| busy: false, | ||
| }; | ||
| leijuke.render(); | ||
| } | ||
| // Interval is set to 50 milliseconds here. | ||
| // This doesn't poll the variables too often but should seem quick to users. | ||
| }, 50); | ||
| } | ||
|
|
||
| render() { | ||
| const { chatOpened, chatLoading } = this.state; | ||
| const label = chatLoading ? Drupal.t('Loading chat...', {}, {context: 'Telia ACE chat'}) : this.static.chatTitle; | ||
| const element = document.getElementById(this.static.selector); | ||
| if (!element) { | ||
| return; | ||
| } | ||
| const innerHTML = ` | ||
| <span class="hel-icon hel-icon--speechbubble-text"></span> | ||
| <span>${label}</span> | ||
| <span class="hel-icon hel-icon--angle-up"></span> | ||
| `; | ||
|
|
||
| if (element.innerHTML !== innerHTML) { | ||
| element.innerHTML = innerHTML; | ||
| } | ||
| element.classList.toggle('loading', chatLoading); | ||
| element.classList.toggle('hidden', chatOpened); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| Drupal.behaviors.chat_leijuke = { | ||
| attach: function attach() { | ||
| const teliaAceData = drupalSettings.telia_ace_data; | ||
|
|
||
| setTimeout(() => { | ||
| // Only load any leijuke once, in case of ajax triggers. | ||
| if (teliaAceData.initialized) { | ||
| return; | ||
| } | ||
|
|
||
| const teliaAce = new TeliaAceLeijuke(teliaAceData); | ||
| teliaAce.init(); | ||
| drupalSettings.telia_ace_data.initialized = true; | ||
| }); | ||
| } | ||
| }; | ||
| })(Drupal, drupalSettings); |
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
2 changes: 1 addition & 1 deletion
2
...okie_compliance/config/optional/language/fi/eu_cookie_compliance.cookie_category.chat.yml
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,4 +1,4 @@ | ||
| description: | ||
| value: '<p>Toiminnallisten chat-evästeiden avulla mahdollistetaan helfi-sivujen chattien toiminta. Jos aloitat chatin, hyväksyt sen käyttöön liittyvät toiminnalliset evästeet automaattisesti. Evästeiden hyväksymiseen ei tällöin tarvita erillistä suostumusta. Toiminnallisia chat-evästeitä ladataan laitteellesi vain, jos käynnistät chatin.</p><figure class="table" tabindex="0"><table><thead><tr><th>Nimi</th><th>Tarjoaja</th><th>Tarkoitus</th><th>Voimassa</th><th>Tyyppi</th></tr></thead><tbody><tr><td>_genesys.widgets.*</td><td>hel.fi</td><td>Käytetään chatin tarvitseman datan tallentamiseen.</td><td>Istunto</td><td> </td></tr><tr><td>leijuke.*</td><td>hel.fi</td><td>Käytetään chatin tarvitseman datan tallentamiseen.</td><td>Istunto</td><td> </td></tr><tr><td>aiap-wbc-chat-app-button-state</td><td>hel.fi</td><td>Käytetään chat-sovellustoiminnallisuutta varten. Säilyttää chat-sovelluksen painikkeen asetukset ja kokoonpanotiedot.</td><td>Istunto</td><td> </td></tr><tr><td>aiap-chat-app-v1-state</td><td>hel.fi</td><td>Käytetään chat-sovellustoiminnallisuutta varten. Säilyttää chat-sovelluksen asetukset ja kokoonpanotiedot.</td><td>Istunto</td><td> </td></tr><tr><td>conversationToken</td><td>https://coh-chat-app-prod.ow6i4n9pdzm.eu-de.codeengine.appdomain.cloud</td><td>Käytetään chat-sovellustoiminnallisuutta varten. Säilyttää chat-sovelluksen keskustelutunnisteen istunnnon tunnistamista ja tietojen hakemista varten.</td><td>Istunto</td><td>Kolmas osapuoli</td></tr></tbody></table></figure>' | ||
| value: '<p>Toiminnallisten chat-evästeiden avulla mahdollistetaan helfi-sivujen chattien toiminta. Jos aloitat chatin, hyväksyt sen käyttöön liittyvät toiminnalliset evästeet automaattisesti. Evästeiden hyväksymiseen ei tällöin tarvita erillistä suostumusta. Toiminnallisia chat-evästeitä ladataan laitteellesi vain, jos käynnistät chatin.</p><figure class="table" tabindex="0"><table><thead><tr><th>Nimi</th><th>Tarjoaja</th><th>Tarkoitus</th><th>Voimassa</th><th>Tyyppi</th></tr></thead><tbody><tr><td>_genesys.widgets.*</td><td>hel.fi</td><td>Käytetään chatin tarvitseman datan tallentamiseen.</td><td>Istunto</td><td> </td></tr><tr><td>leijuke.*</td><td>hel.fi</td><td>Käytetään chatin tarvitseman datan tallentamiseen.</td><td>Istunto</td><td> </td></tr><tr><td>aiap-wbc-chat-app-button-state</td><td>hel.fi</td><td>Käytetään chat-sovellustoiminnallisuutta varten. Säilyttää chat-sovelluksen painikkeen asetukset ja kokoonpanotiedot.</td><td>Istunto</td><td> </td></tr><tr><td>aiap-chat-app-v1-state</td><td>hel.fi</td><td>Käytetään chat-sovellustoiminnallisuutta varten. Säilyttää chat-sovelluksen asetukset ja kokoonpanotiedot.</td><td>Istunto</td><td> </td></tr><tr><td>conversationToken</td><td>https://coh-chat-app-prod.ow6i4n9pdzm.eu-de.codeengine.appdomain.cloud</td><td>Käytetään chat-sovellustoiminnallisuutta varten. Säilyttää chat-sovelluksen keskustelutunnisteen istunnnon tunnistamista ja tietojen hakemista varten.</td><td>Istunto</td><td>Kolmas osapuoli</td></tr><tr><td>CallGuide.language</td><td>hel.fi</td><td>ACE Chat: ACE Web SDK:ssa käytettävä kieli, joka on johdettu selainten ensisijaisesta kieliasetuksesta ja ACE Web SDK - asetuksista.</td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>CallGuide.config_services_*</td><td>hel.fi</td><td>ACE Chat: Asiakaspalveluintegraatioiden määritys verkkosivulla. Vähentää verkkoliikennettä sivun lataamisen ja navigoinnin yhteydessä.</td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>*_CGWebSDK_windowGUID</td><td>wds.ace.teliacompany.com</td><td>ACE Chat: Tämän selainikkunan yksilöllinen identiteetti. Käytetään, jos selaimessa on useampi kuin yksi avoin ikkuna verkkosivustolle.</td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>*_CGWebSDK_videoShower</td><td>wds.ace.teliacompany.com</td><td>ACE Chat: Vain yksi ikkuna kerrallaan voi näyttää videota. Nämä tiedot seuraavat, mikä niistä (jos sellainen on).</td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>*_CGWebSDK_videoClients</td><td>wds.ace.teliacompany.com</td><td>ACE Chat: Luettelo kaikista ikkunoista, jotka ovat todennäköisiä videon näyttämiseen.</td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>*_ACEChatState_ActiveClient</td><td>wds.ace.teliacompany.com</td><td>ACE Chat: Verkkosivustolla voi olla useampi kuin yksi chat-asiakasohjelma. Tämä kohde seuraa, mihin asiakkaaseen nykyinen chat kuuluu.</td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>*_chatEntrance</td><td>wds.ace.teliacompany.com</td><td>ACE Chat: Järjestelmän chat-sisäänkäynnin nimi</td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>*_chatUID</td><td>wds.ace.teliacompany.com</td><td>ACE Chat: Keskustelun istuntotunnus kommunikoitaessa ACE:n kanssa</td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>humany-*</td><td>hel.fi</td><td>ACE Chat: Säilyttää widgetin tilan, kun sivu ladataan uudelleen </td><td>-</td><td>Paikallinen muisti</td></tr><tr><td>ARRAffinity</td><td>.hel.humany.net</td><td>ACE Chat: Kuormituksen tasaus taustajärjestelmässä</td><td>Istunto</td><td>Kolmas osapuoli</td></tr><tr><td>ARRAffinitySameSite</td><td>.hel.humany.net</td><td>ACE Chat: Kuormituksen tasaus taustajärjestelmässä</td><td>Istunto</td><td>Kolmas osapuoli</td></tr></tbody></table></figure>' | ||
| format: full_html | ||
| label: 'Toiminnalliset chat-evästeet' |
Oops, something went wrong.