UHF-10161: Create leijuke script for Telia ACE chat

[juho-lehmonen]

UHF-10161, UHF-9328

What was done

• UHF-10161: Ports over Telia's load_ace.js implementation to a local Drupal library. Uses a modified version of the Chatleijuke scripts.
• UHF-9328: Adds cookie descriptions for Telia ACE implementations

How to install

• Make sure your instance is up and running on latest dev branch. Recommended to use the Palvelukeskus instance.
  • git pull origin dev
  • make fresh
• Update the Helfi Platform config
  • composer require drupal/helfi_platform_config:dev-UHF-10161-telia-ace-script
• Update HDBT
  • composer require drupal/hdbt:dev-UHF-10161-telia-ace-script
• Run drush locale:check && drush locale:update
• Run make drush-updb drush-cr

How to test

• Check that the cookie descriptions appear and that they are correctly translated:
  • https://drupal-palvelukeskus.docker.so/fi/evasteasetukset
  • https://drupal-palvelukeskus.docker.so/en/cookie-information-and-settings
  • https://drupal-palvelukeskus.docker.so/sv/cookie-installningar
• Add the Telia ACE Widget block to the Attachments region: https://drupal-palvelukeskus.docker.so/fi/admin/structure/block
  • Make sure the title is not visible
  • Chat Widget ID and translations: matkapalvelut-chat_en, matkapalvelut-chat_fi and matkapalvelut-chat_sv
  • Chat button label: "Matkapalvelut chat"
  • Add the block to /helsingin-matkapalvelu, /helsingfors-resetjanst and /helsinki-transport-service
• Open this page in a private browsing window, only accept mandatory cookies: https://drupal-palvelukeskus.docker.so/fi/helsingin-matkapalvelu
  • Test the page in mobile mode. When you open the mobile menu, the placeholder button should be hidden and shouldn't show up on top of the menu.
  • You should see the chat button. No assets from wds.ace.teliacompany.com should be loaded yet and no chat cookies should be set yet
  • Click the button. It should be replaced with "Loading chat..." (translated to the correct language) until the chat widget loads.
  • The chat widget should open automatically. On local environments the actual chat is most likely inoperable, but this should be fine.
  • Leave the widget open and reload the page. On the next page load it should open automatically again
  • Close the widget and reload the page. On the next page load it should replace the placeholder button (after a brief load time) but the widget should remain closed. The icon might be correct (speech bubble icon) or might be bugged (caret icon), but we can't really affect this currently.
  • Test the page in mobile mode. When you open the mobile menu, the chat button should be hidden and shouldn't show up on top of the menu.
• Check the cookies, localstorage and sessionstorage data. Everything set by the Telia ACE implementation should be described in the cookie settings: https://drupal-palvelukeskus.docker.so/en/cookie-information-and-settings
  • Not all described cookies are currently in use, but the implementation should not set anything that isn't listed on the cookies page.
• Check that code follows our standards
• Check that updated documentation makes sense: https://helsinkisolutionoffice.atlassian.net/wiki/spaces/HEL/pages/8426258434/Telia+ACE-widget

Continuous documentation

• This feature has been documented/the documentation has been updated

Translations

• Translations have been added to .po -files and included in this PR

Other PRs

• UHF-10161: Hide Telia ACE buttons and widgets when mobile menu is open drupal-hdbt#1014

[Arkkimaagi]

Hi!

Great review instructions, thanks!

• I'm occasionally seeing the chat not opening on click. Instead the whole button disappears. Reloading the page helps, but it's kinda bad experience for the user.
• The chat on my instance is missing chat_title and the chat only has the speech_bubble icon, no text
• Translations are not working, as in the loading text does not get translated.
• After opening the chat once, closing it and reloading the page, the chat seems to automatically open in a different state (chevron_down visible). Is this an ACE bug or a bug in how we initialise the chat once cookies are set? The same happens also if I accept all cookies upon entering the site on a fresh browser. Are we sure it will not open connections to a chat person on each pageload?
• We need to enable linters in this repository, this code does not pass our HDBT linters that might catch problems etc.

All in all, code seems to be mostly of good quality, these issues are still blockers IMO. So close. :)

[Arkkimaagi]

Oh, and please add the chat buttons and other ui to our mobile menus "hide when mobile menu is open" selector list.

[juho-lehmonen]

Oh, and please add the chat buttons and other ui to our mobile menus "hide when mobile menu is open" selector list.

Selectors have been added to the HDBT theme and the PR instructions have been updated.

[juho-lehmonen]

• I'm occasionally seeing the chat not opening on click. Instead the whole button disappears. Reloading the page helps, but it's kinda bad experience for the user.
• The chat on my instance is missing chat_title and the chat only has the speech_bubble icon, no text
• After opening the chat once, closing it and reloading the page, the chat seems to automatically open in a different state (chevron_down visible). Is this an ACE bug or a bug in how we initialise the chat once cookies are set? The same happens also if I accept all cookies upon entering the site on a fresh browser.

Unfortunately all of these issues come from the Telia ACE code, but we'll report these to Telia after testing the Chat in the correct demo environment. Some of these might be caused by the local domain being whitelisted and others are configuration issues.

• Are we sure it will not open connections to a chat person on each pageload?

Yes, the user needs to click a button inside the chat window (and enter their name etc) before anything is connected to the system.

• Translations are not working, as in the loading text does not get translated.

This should be working now, can you try rerunning drush locale:check && drush locale:update; drush cr inside the VM? This should update the UI translations.

• We need to enable linters in this repository, this code does not pass our HDBT linters that might catch problems etc.

This file should be compliant with the linter rules now. Created a new ticket for linting all scripts in platform config: https://helsinkisolutionoffice.atlassian.net/browse/UHF-10251

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[Arkkimaagi]

Looks mostly good to me. The translations do not seem to work on my instance, it still keeps saying the loading thing in Englist on a Finnish page.

Sorry it took so long to review. 🌹

I thin k we can Approve this if you double check the language thing on your machine.